Skip to content

Commit

Permalink
keyboard aware scroll view implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebouJ
ebouJ committed Aug 2, 2018
1 parent 3d1868b commit 41e3b64
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 16 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
"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",
"react-native-simple-toast": "^0.0.8",
"react-native-splash-screen": "3.0.6",
Expand Down
5 changes: 4 additions & 1 deletion src/views/example/cubic-equation/cubic-equation-screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import * as React from "react"
import { ViewStyle, TextStyle, View, Dimensions } from "react-native"
import { ViewStyle, TextStyle, View, Dimensions, ScrollView } from "react-native"
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'

Expand Down Expand Up @@ -130,6 +131,7 @@ export class CubicEquation extends React.Component<CubicEquationScreenProps, Sta
onError={() => console.error('Error')}
/>
</View>
<KeyboardAwareScrollView contentContainerStyle={{ flex: 1}}>
<View style={{ flex: 0.6,justifyContent: 'space-around',}}>
<View style={InputView}>
<Text style={textStyle}>a =</Text>
Expand Down Expand Up @@ -176,6 +178,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) => {
Expand Down
24 changes: 11 additions & 13 deletions src/views/example/three-linear-equation/three-linear-equation-screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import * as React from "react"
import { ViewStyle, TextStyle, View , Dimensions} from "react-native"
import { ViewStyle, TextStyle, View , Dimensions, Keyboard, ScrollView} from "react-native"
import { Text } from "../../shared/text"
import { color } from "../../../theme"
import Toast from 'react-native-simple-toast'
import { Header } from '../../shared/header'
import { Button } from '../../shared/button'
import { TextField } from '../../shared/text-field'
import { KeyboardAwareView } from 'react-native-keyboard-aware-view'
import { NavigationScreenProps } from "react-navigation"
import isNotValid from '../../../lib/isValid'
import ThreeVariableSolver from '../../../lib/threeVariables'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

export interface ThreeLinearEquationScreenProps extends NavigationScreenProps<{}> {
}
Expand Down Expand Up @@ -92,18 +94,22 @@ export class ThreeLinearEquation extends React.Component<ThreeLinearEquationScre
state = initialState

solve = async () => {
await Keyboard.dismiss()
const matrix = []
const { x1, x2, x3, y1, y2, y3, z1, z2, z3, w1, w2, w3 } = this.state
if(isNotValid(x1) || isNotValid(x2) || isNotValid(x3) || isNotValid(y1) || isNotValid(y2) || isNotValid(y3) || isNotValid(z1) || isNotValid(z2) || isNotValid(z3) || isNotValid(w1) || isNotValid(w2) || isNotValid(w3)){
Toast.showWithGravity('The input should be a number.', Toast.SHORT, Toast.CENTER)
return
}



matrix.push([Number(x1),Number(y1),Number(z1),Number(w1)])
matrix.push([Number(x2),Number(y2),Number(z2),Number(w2)])
matrix.push([Number(x3),Number(y3),Number(z3),Number(w3)])
const roots = await ThreeVariableSolver(matrix)
this.setState({ roots })


}

Expand All @@ -123,37 +129,35 @@ export class ThreeLinearEquation extends React.Component<ThreeLinearEquationScre
leftIcon="chevron-left"
onLeftPress={() => goBack()}
/>
<KeyboardAwareScrollView contentContainerStyle={{ flex: 1}}>
<ScrollView style={{ flex: 1}}>
<View style={{flex: 0.7, justifyContent: 'space-around'}} >
<View style={InputView}>
<TextField
style={Input}
value={x1}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={x1 => this.setState({ x1})}
/>
<Text style={textStyle}> x +</Text>
<TextField
style={Input}
value={y1}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={y1 => this.setState({y1})}
/>
<Text style={textStyle}> y +</Text>
<TextField
style={Input}
value={z1}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={z1 => this.setState({z1})}
/>
<Text style={textStyle}> z =</Text>
<TextField
style={Input}
value={w1}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={w1 => this.setState({w1})}
/>
</View>
Expand All @@ -162,31 +166,27 @@ export class ThreeLinearEquation extends React.Component<ThreeLinearEquationScre
style={Input}
value={x2}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={x2 => this.setState({ x2})}
/>
<Text style={textStyle}> x +</Text>
<TextField
style={Input}
value={y2}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={y2 => this.setState({y2})}
/>
<Text style={textStyle}> y +</Text>
<TextField
style={Input}
value={z2}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={z2 => this.setState({z2})}
/>
<Text style={textStyle}> z =</Text>
<TextField
style={Input}
value={w2}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={w2 => this.setState({w2})}
/>
</View>
Expand All @@ -195,31 +195,27 @@ export class ThreeLinearEquation extends React.Component<ThreeLinearEquationScre
style={Input}
value={x3}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={x3 => this.setState({x3})}
/>
<Text style={textStyle}> x +</Text>
<TextField
style={Input}
value={y3}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={y3 => this.setState({y3})}
/>
<Text style={textStyle}> y +</Text>
<TextField
style={Input}
value={z3}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={z3 => this.setState({z3})}
/>
<Text style={textStyle}> z =</Text>
<TextField
style={Input}
value={w3}
inputStyle={inputStyle}
keyboardType={'numeric'}
onChangeText={w3 => this.setState({w3})}
/>
</View>
Expand All @@ -235,6 +231,8 @@ export class ThreeLinearEquation extends React.Component<ThreeLinearEquationScre
})
}
</View>
</ScrollView>
</KeyboardAwareScrollView>
</View>
)
}
Expand Down
5 changes: 4 additions & 1 deletion src/views/shared/text-field/text-field.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from "react"
import { View, TextInput, TextStyle, ViewStyle } from "react-native"
import { View, TextInput, TextStyle, ViewStyle, Platform } from "react-native"
import { color, spacing, typography } from "../../../theme"
import { translate } from "../../../i18n"
import { Text } from "../text"
Expand Down Expand Up @@ -42,6 +42,7 @@ export class TextField extends React.Component<TextFieldProps, {}> {
const containerStyle: ViewStyle = { ...CONTAINER, ...PRESETS[preset], ...styleOverride }
const inputStyle: TextStyle = { ...INPUT, ...inputStyleOverride }
const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder
const keyboardType = Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'default'

return (
<View style={containerStyle}>
Expand All @@ -52,6 +53,8 @@ export class TextField extends React.Component<TextFieldProps, {}> {
underlineColorAndroid={color.transparent}
{...rest}
style={inputStyle}
keyboardType={keyboardType}
autoCorrect={false}
/>
</View>
)
Expand Down
13 changes: 12 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7977,7 +7977,7 @@ react-native-i18n@2.0.12:
dependencies:
i18n-js "^3.0.3"

react-native-iphone-x-helper@^1.0.2:
react-native-iphone-x-helper@^1.0.1, react-native-iphone-x-helper@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.3.tgz#7a2f1e0574e899a0f1d426e6167fd98990083214"

Expand All @@ -7988,6 +7988,17 @@ react-native-katex@^0.3.0:
katex "^0.10.0-beta"
prop-types "^15.6.0"

react-native-keyboard-aware-scroll-view@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.6.0.tgz#0f15bd7d09c0cb48a4ab9ba0d83897fc84b1a1e1"
dependencies:
prop-types "^15.6.0"
react-native-iphone-x-helper "^1.0.1"

react-native-keyboard-aware-view@^0.0.14:
version "0.0.14"
resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-view/-/react-native-keyboard-aware-view-0.0.14.tgz#4cb0079c97a3f85172e451267e333db95cc70372"

react-native-keychain@3.0.0-rc.3:
version "3.0.0-rc.3"
resolved "https://registry.yarnpkg.com/react-native-keychain/-/react-native-keychain-3.0.0-rc.3.tgz#891ea07a564d1bf46b644bc615af21f15a04b12b"
Expand Down

0 comments on commit 41e3b64

Please sign in to comment.