We Keep Coding

React Native ScrollView dynamic footer

How to make React native scrollview footer. if the content is smaller than the screen, there should be a button at the very bottom of the screen; if it is larger, then the button should go to the very bottom after the content
I did this, but if there is not enough content, then the button goes up
<ScrollView>
<Text>asdasd</Text>
<Button text="Next" />
</ScrollView>
if so, then always sit below the scroll under the button goes, but I need the button to go too
<View>
<ScrollView>
<Text>asdasd</Text>
</ScrollView>
<Button text="Next" />
</View>

Try setting the scrollview to flex available space, and button to position at bottom
<ScrollView style={{flex: 1}}>
<Text>asdasd</Text>
<Button text="Next" style={{bottom: 0}}/>
</ScrollView>

here is my solution which i found
<ScrollView>
<View style={{ minHeight: height - buttonHeight - safeAreaView }}>
<Text>Content</Text>
</View>
<Button text="Next" />
</ScrollView>

Android keyboard overlapping inputs

Using KeyboardAvoidingView I have a basic example where I would like the keyboard to push the inputs upwards so it is not overlapping on Android. The inputs do not move when the keyboard is in focus. Any ideas?
The inputs stay in a fixed position, do I need to place everything in a scroll view?
UPDATE: I use nested navigators, could a style on a parent component prevent this working?
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput placeholder="input1" />
<TextInput placeholder="input2" />
<TextInput placeholder="input3" />
<TextInput placeholder="input4" />
<TextInput placeholder="input5" />
<TextInput placeholder="input6" />
<TextInput placeholder="input7" />
<TextInput placeholder="input8" />
<TextInput placeholder="input9" />
<TextInput placeholder="input10" />
<TextInput placeholder="input11" />
<TextInput placeholder="input12" />
</KeyboardAvoidingView>

try to change the behavior to height for android as described on keyboardavoidingview
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }} >

How to pass in navigation props into a functional component screen through React Navigation?

I have a functional component screen with a React Native FlatList of custom "Tasks". I want to be able to navigate from a task to another functional component, "TaskEditScreen" and pass some props to the screen as well.
<TouchableOpacity onPress={()=>{navigation.navigate('Task Edit')}}>
<Feather
name="edit"
size={35}
color="black"
style={{
margin: 5
}}
/>
</TouchableOpacity>
The onPress function works and it navigates me to the correct screen, but how do I also pass in some kind of props or data to this screen?

Documentation: https://reactnavigation.org/docs/params
<TouchableOpacity onPress={() => { navigation.navigate('Task Edit', {someParam: "someValue"}) }}>
<Feather
name="edit"
size={35}
color="black"
style={{
margin: 5
}}
/>
</TouchableOpacity>

KeyboardAvoidingView Shrinks My TextInputs No Matter What

No matter what I do, KeyboardAvoidingView shrinks my TextInputs as much as it can instead of adding padding to the content above them and pushing them off the screen.
All I want is the normal behavior where my content is padded off the screen and nothing shrinks as is seen in the simplest tutorials using this component. I've tried all the behaviors, and all kinds of permutations of view hierarchies. No matter what I do, it will shrink the inputs.
<KeyboardAvoidingView style={Styles.containerView} behavior={'padding'}>
<View style={Styles.topContainerView}>
<Image style={Styles.subLogo} source={require('../../../assets/images/app-icon.png')} />
<View style={{justifyContent: 'center', marginVertical: 10}}>
<Text style={Styles.subtext}>{subtext}</Text>
</View>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({firstName: text})}
value={this.state.firstName}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({lastName: text})}
value={this.state.lastName}
placeholderText={'Last Name'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({email: text})}
value={this.state.email}
placeholderText={'Enter Email'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
placeholderText={'Enter Password'}
secureTextEntry={true}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({confirmPassword: text})}
value={this.state.confirmPassword}
placeholderText={'Confirm Password'}
secureTextEntry={true}
/>
</View>
<View style={Styles.bottomContainerView}>
<Button buttonStyle={Styles.continueButton} text={"Continue"} onPress={continueAction} />
<TouchableOpacity style={Styles.cancelContainer} onPress={this.goBack}>
<Text style={Styles.cancelText}>{'Cancel'}</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
In my code above, the Image element and subtext below it will not budge. No padding will be added to them nor will they shrink. Instead, the TextInputs will all shrink.
I just want them to be pushed off the screen instead of the inputs shrinking.
I have also tried adding a ScrollView within the KeyboardAvoidingView that contains all the elements, and even given a hard-coded height to the inputs.

When working with RN 0.63.1 and Android 9, I encountered the same issue. Upon reading GitHub issues, using KeyboardAvoidingView was discouraged and instead setting this in my AndroidManifest.xml fixed it.
Default:
<activity
...
android:windowSoftInputMode="adjustResize"
>
Change it to:
<activity
...
android:windowSoftInputMode="adjustPan"
>
I found setting this makes the padding work but it is still too close to the keyboard. I used KeyboardAvoidingView to add some padding between keyboard and text input.

Whole text is copied to the right side in react native code

Now it is on the left side. How to copy the same text to the right even
and how can I style the button and style the text input more colorful and fonts bigger?
Here the example of what I want:
Here is what I have tried
<View style={StyleSheet.row}>
<Text>GAME 10</Text>
<TextInput
placeholder="GAME 10"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<View style={StyleSheet.row}>
<Text>TOTAL TEAM 1:</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid="transparent"
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>

You can move the text into a component, then just render the component twice:
export default class Text extends React.Component {
render() {
return (
<View>
<View style={StyleSheet.row}>
<Text>
GAME 10
</Text>
<TextInput placeholder="GAME 10" underlineColorAndroid='transparent' style={StyleSheet.TextInputStyleClass} />
</View>
<View style={StyleSheet.row}>
<Text>
TOTAL TEAM 1:
</Text>
<TextInput
placeholder="TOTAL"
underlineColorAndroid='transparent'
style={StyleSheet.TextInputStyleClass}
/>
</View>
<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>
</View>
)
}
}
class Parent extends React.Component {
render() {
return (
<View>
<View className="left">
<Text />
</View>
<View className="right">
<Text />
</View>
</View>
)
}
}