clean up and remove katex

Author: ebouJ

Diff for: package.json

@@ -33,7 +33,6 @@
     "react-mathjax2": "^0.0.1",
     "react-native": "0.55.4",
     "react-native-i18n": "2.0.12",
-    "react-native-katex": "^0.3.0",
     "react-native-keyboard-aware-scroll-view": "^0.6.0",
     "react-native-keyboard-aware-view": "^0.0.14",
     "react-native-keychain": "3.0.0-rc.3",

Diff for: src/images/cubic.png

@@ -1,10 +1,10 @@
 import { createStackNavigator } from "react-navigation"
-import { Home } from "../views/example/home/home-screen"
-import { ThreeLinearEquation } from "../views/example/three-linear-equation/three-linear-equation-screen"
-import { TwoLinearEquation } from "../views/example/two-linear-equation/two-linear-equation-screen"
-import { CubicEquation } from "../views/example/cubic-equation/cubic-equation-screen"
-import { QuadraticEquation } from "../views/example/quadratic-equation/quadratic-equation-screen"
-import { LinearEquation } from "../views/example/linear-equation/linear-equation-screen"
+import { Home } from "../views/screens/home/home-screen"
+import { ThreeLinearEquation } from "../views/screens/three-linear-equation/three-linear-equation-screen"
+import { TwoLinearEquation } from "../views/screens/two-linear-equation/two-linear-equation-screen"
+import { CubicEquation } from "../views/screens/cubic-equation/cubic-equation-screen"
+import { QuadraticEquation } from "../views/screens/quadratic-equation/quadratic-equation-screen"
+import { LinearEquation } from "../views/screens/linear-equation/linear-equation-screen"
 
 export const RootNavigator = createStackNavigator(
   {

Diff for: src/images/[email protected]

@@ -1,14 +1,22 @@
 import * as React from "react"
-import { ViewStyle, TextStyle, View, Dimensions, ScrollView } from "react-native"
+import { 
+  ViewStyle, 
+  TextStyle, 
+  View, 
+  Dimensions, 
+  Keyboard, 
+  ImageStyle,
+  Image } from "react-native"
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { NavigationScreenProps } from "react-navigation"
+import Toast from 'react-native-simple-toast'
+
 import { Text } from "../../shared/text"
-import Katex from 'react-native-katex';
 import { color } from "../../../theme"
 import { Header } from '../../shared/header'
 import { TextField } from '../../shared/text-field'
 import { Button } from '../../shared/button'
 import isNotValid from '../../../lib/isValid'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-import { NavigationScreenProps } from "react-navigation"
 import SolveCubic from '../../../lib/cubic'
 
 export interface CubicEquationScreenProps extends NavigationScreenProps<{}> {
@@ -25,7 +33,8 @@ const TextStyle: TextStyle = {
 }
 const InputView: ViewStyle = {
   flexDirection: 'row',
-  margin: 20
+  margin: 20,
+  width: width / 2
 }
 
 const inputStyle: TextStyle = {
@@ -58,22 +67,15 @@ const ButtonView: ViewStyle = {
   justifyContent: 'space-between'
 }
 
-const inlineStyle =`
-html, body {
-  display: flex;
-  background-color: #1d1d1d;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin-top: 9px;
+const ImageStyle: ImageStyle = {
+  width: width - 20
 }
-.katex {
-  font-size: 5em;
-  margin: 0;
-  display: flex;
-  color: white;
+
+const InputStyle: ViewStyle = {
+  flex: 0.6,
+  justifyContent: 'space-around'
 }
-`;
+
 
 interface State {
   a: string,
@@ -95,9 +97,10 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
   state = initialState
 
   solve = async () => {
+    Keyboard.dismiss
     const { a, b , c , d } = this.state
     if(isNotValid(a) || isNotValid(b) || isNotValid(c) || isNotValid(d)){
-       return;
+       return Toast.showWithGravity('The input should be a number.', Toast.SHORT, Toast.CENTER)
     }
 
 
@@ -113,6 +116,7 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
     const { goBack } = this.props.navigation
     const { roots, a, b , c , d } = this.state
     return (
+      <KeyboardAwareScrollView contentContainerStyle={{ flex: 1}}> 
       <View style={ROOT} >
         <Header  
           headerTx="cubic.header" 
@@ -122,29 +126,21 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
           onLeftPress={() => goBack()}
           />
           <View style={EquationView}> 
-           <Katex
-              expression="ax^3 + bx^2 + cx + d = 0"
-              style={{flex: 1}}
-              inlineStyle={inlineStyle}
-              displayMode={false}
-              colorIsTextColor={false}
-              onError={() => console.error('Error')}
-            />
+          <Image source={require('../../../images/cubic.png')} resizeMode="contain" style={ImageStyle} />
            </View>
-           <KeyboardAwareScrollView contentContainerStyle={{ flex: 1}}> 
-           <View style={{ flex: 0.6,justifyContent: 'space-around',}}>
+           <View style={InputStyle}>
            <View style={InputView}>
-                <Text style={textStyle}>a  =</Text>
+                <Text style={textStyle}>a =</Text>
                 <TextField 
                   style={Input} 
                   value={a}
                   inputStyle={inputStyle}
                   keyboardType={'numeric'}
                   onChangeText={(a) => this.setState({ a })}
-                />
+                />              
            </View>
            <View style={InputView}>
-                <Text style={textStyle}>b  =</Text>
+                <Text style={textStyle}>b =</Text>
                 <TextField 
                   style={Input} 
                   value={b}
@@ -154,7 +150,7 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
                 />
            </View>
            <View style={InputView}>
-                <Text style={textStyle}> c  =</Text>
+                <Text style={textStyle}>c =</Text>
                 <TextField 
                   style={Input} 
                   value={c}
@@ -164,7 +160,7 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
                 />
            </View>
            <View style={InputView}>
-                <Text style={textStyle}>d  =</Text>
+                <Text style={textStyle}>d =</Text>
                 <TextField 
                   style={Input} 
                   value={d}
@@ -178,7 +174,7 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
                <Button preset="solve" text="Clear" onPress={this.clear} />
               </View>
            </View>
-           </KeyboardAwareScrollView>
+           
            <View style={{ justifyContent: 'space-around', alignItems: 'center', flex: 0.2}}>
             {
               roots && roots.map((item, index) => {
@@ -187,7 +183,9 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
               })
             }
             </View>
+            
       </View>
+      </KeyboardAwareScrollView>
     )
   }
 }

Diff for: src/images/[email protected]

@@ -1,14 +1,23 @@
 import * as React from "react"
-import { ViewStyle, View, TextStyle, Dimensions } from "react-native"
+import { 
+  ViewStyle, 
+  View, 
+  TextStyle, 
+  Dimensions, 
+  ScrollView, 
+  ImageStyle,
+  Image } from "react-native"
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { NavigationScreenProps } from "react-navigation"
+import Toast from 'react-native-simple-toast'
+
 import { Text } from "../../shared/text"
-import Katex from 'react-native-katex';
 import { color } from "../../../theme"
-import Toast from 'react-native-simple-toast'
 import { Header } from '../../shared/header'
 import { Button } from '../../shared/button'
 import isNotValid from '../../../lib/isValid'
 import { TextField } from '../../shared/text-field'
-import { NavigationScreenProps } from "react-navigation"
+
 
 export interface LinearEquationScreenProps extends NavigationScreenProps<{}> {
 }
@@ -58,22 +67,9 @@ const ButtonView: ViewStyle = {
   justifyContent: 'space-between'
 }
 
-const inlineStyle =`
-html, body {
-  display: flex;
-  background-color: #1d1d1d;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  margin-top: 9px;
-}
-.katex {
-  font-size: 5em;
-  margin: 0;
-  display: flex;
-  color: white;
+const ImageStyle: ImageStyle = {
+  width: width - 20
 }
-`;
 
 interface State {
   a: string,
@@ -96,7 +92,7 @@ export class LinearEquation extends React.Component<LinearEquationScreenProps, S
   solve = async () => {
     const { a, b, c  } = this.state
     if(isNotValid(a) || isNotValid(b) || isNotValid(c) ){
-      Toast.showWithGravity('The input should be a number.', Toast.SHORT, Toast.CENTER)
+      
        return;
     }
 
@@ -116,24 +112,20 @@ export class LinearEquation extends React.Component<LinearEquationScreenProps, S
     const { goBack } = this.props.navigation
     const { roots, a, b, c} = this.state
     return (
-      <View style={ROOT} >
+      
+      <ScrollView style={ROOT} scrollEnabled={false} >
         <Header  
           headerTx="linear.header" 
           style={HeaderStyle} 
           titleStyle={TextStyle}
           leftIcon="chevron-left"
           onLeftPress={() => goBack()}
            />
+           <KeyboardAwareScrollView contentContainerStyle={{ flex: 1}}> 
           <View style={EquationView}> 
-           <Katex
-              expression="ax + b = c"
-              style={{flex: 1}}
-              inlineStyle={inlineStyle}
-              displayMode={false}
-              colorIsTextColor={false}
-              onError={() => console.error('Error')}
-            />
+          <Image source={require('../../../images/linear.png')} resizeMode="contain" style={ImageStyle} />
            </View>
+           
            <View style={InputView}>
                 <Text style={textStyle}> a  = </Text>
                 <TextField 
@@ -176,7 +168,9 @@ export class LinearEquation extends React.Component<LinearEquationScreenProps, S
               })
             }
             </View>
-      </View>
+      
+      </KeyboardAwareScrollView> 
+      </ScrollView>
     )
   }
 }