We Keep Coding

React Native Scrollview doesn't stay at the bottom

When I try and scroll to the bottom of my React Native screen it just goes back to the top after letting go. I've tried adding a flex of 1 to the parents of the ScrollView, but that didn't fix the issue, and neither did adding a bottom padding.
What could be causing this behavior?
import {
View,
Text,
SafeAreaView,
StyleSheet,
TextInput
TouchableOpacity,
ScrollView,
} from 'react-native';
import React, {useState} from 'react';
export default function SelectAddress() {
return (
<View style={styles.mainView}>
<SafeAreaView>
<View style={{minHeight: '100%'}}>
<ScrollView>
<View>
<TextInput style={styles.input} placeholder="Street address" />
<TextInput style={styles.input} placeholder="Apt/Suite/Bldg" />
<TextInput style={styles.input} placeholder="City" />
<TextInput style={styles.input} placeholder="State" />
<TextInput style={styles.input} placeholder="Zipcode" />
</View>
<TouchableOpacity style={styles.save}>
<Text>Save</Text>
</TouchableOpacity>
</ScrollView>
</View>
</SafeAreaView>
</View>
);
}
const styles = StyleSheet.create({
mainView: {
height: Dimensions.get('screen').height,
width: Dimensions.get('screen').width,
backgroundColor: '#ffffff',
},
input: {
paddingTop: 15,
paddingBottom: 15,
borderRadius: 12,
paddingLeft: 10,
minWidth: '95%',
marginTop: 10,
},
save: {
alignSelf: 'center',
padding: 6,
marginTop: 10,
borderRadius: 20,
},
});

please check the expo, its not happening there, you can share an expo too.
https://snack.expo.dev/#gaurav1995/amused-ramen

React Native Styling & Flex -- Centering A Component

I'm having incredible difficulty figuring out why my stylesheet isn't working the way that I want it to -- I want both the icon [note the comments] as well as the button on the bottom to appear centered, but both currently appear left-aligned. Would be grateful for any + all direction.
Here are my imports:
import { useNavigation } from '#react-navigation/native';
import React from 'react';
import {
Text,
SafeAreaView,
ScrollView,
View,
TouchableOpacity,
ActivityIndicator,
Alert
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { firebase } from '../../../../firebase/config';
import styles from './styles';
import DateTimePicker from '#react-native-community/datetimepicker';
import { Sae } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { FontAwesome } from '#expo/vector-icons'
Here is the code returned from my class component:
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.inputContainer}>
<View>
<Text style={styles.title}>Create An Event</Text>
</View>
<Sae
style={{marginLeft: 10, marginRight: 10, marginBottom: 10}}
labelStyle={{color: '#656565'}}
label={'Event Name'}
iconClass={FontAwesomeIcon}
iconName={'calendar-check-o'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<Sae
style={{marginLeft: 10, marginRight: 10}}
labelStyle={{color: '#656565'}}
inputStyle={{fontSize: 16}}
label={'Event Description'}
iconClass={FontAwesomeIcon}
iconName={'pencil'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<View style={styles.break1}></View>
<View style={styles.break2}><FontAwesome name='circle' color='#e6a80c'/></View> //would like this icon to be centered
<View style={styles.break3}></View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Date </Text>
<DateTimePicker
testID='datePicker'
value={this.state.date}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Select a date'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Start Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventStartTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Start time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>End Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventEndTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChangeEventEndTime}
placeholder='End time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Guests' Votes Due By </Text>
<DateTimePicker
testID='datePicker'
value={this.state.votingDeadline}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChangeVotingDeadline}
placeholder='Votes Due By'
style={{ marginHorizontal: 10 }}
/>
</View>
</View>
<View style={styles.buttonContainer}> //would like this button to appear centered also
<TouchableOpacity
style={styles.button}
onPress={() => this.storeEvent()}
>
<Text style={styles.Btn}>Create Event</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
And here is the stylesheet:
export default StyleSheet.create({
container: {
backgroundColor: '#ffffff',
flex: 1,
justifyContent: 'center'
},
inputContainer: {
padding: 10
},
indInputContainer: {
margin: 8
},
break1: {
marginBottom: 20,
marginTop: 20
},
break2: {
alignContent: 'center',
justifyContent: 'center'
},
break3: {
marginTop: 10,
marginBottom: 10
},
text: {
fontSize: 16,
color: '#656565',
},
preferences: {
fontWeight: 'bold',
fontSize: 20,
margin: 5,
},
title: {
padding: 5,
fontSize: 16,
fontWeight: 'bold',
color: '#e95530'
},
buttonContainer: {
justifyContent: 'center',
alignContent: 'center'
},
button: {
backgroundColor: '#e95531',
margin: 10,
marginTop: 20,
height: 48,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
width: 275,
},
Btn: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
preloader: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
Would be super grateful for some help. Thank you!

How to set keyboard off at beginning on React Native

My app at first opening direct a login page and keyboard open automaticly! But what i want is keyboard off position at beginning but when clicking any input must be keyboard on.Here is my login.js page
import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import Axios from 'axios';
import AsyncStorage from '#react-native-community/async-storage';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
ActivityIndicator,
} from 'react-native';
import { Container, Header, Content, Form, Item, Input, Button } from 'native-base';
import { set } from 'react-native-reanimated';
export default class Login extends Component {
render() {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic" >
<View style={styles.containerx}>
<Container style={styles.bigContainer} >
<Content contentContainerStyle={{ flex: 1, justifyContent: 'center', padding: 30 }}>
<Image
source={ require('../assets/icon1024.png') }
style={{ width: 150, height: 150, alignSelf: 'center', marginBottom: 10 }}
/>
<Text style={styles.loginText}>KUŞ SOR</Text>
<Text style={[styles.loginText, { fontSize: 14 }]} >Birdpx Kuş Tanımlama Platformu</Text>
{
this.state.loading == true ? <View style={styles.emptyCont}><ActivityIndicator size='large' color='white' /></View> :
<Formik
initialValues={{username: '', password: ''}}
onSubmit={this._handleSubmit}
validationSchema={
Yup.object().shape({
password: Yup.string().min(6, 'Minimim 6 Karakter').required('Bu Alan Zorunludur'),
username: Yup.string().required('Bu Alan Zorunludur'),
})
}
>
{({ handleChange, handleBlur, handleSubmit, values, errors }) => (
<Form>
<Item>
<Input
onChangeText={handleChange('username')}
onBlur={handleBlur('username')}
placeholder="Kullanıcı Adı"
style={{ color: 'white' }}
autoCapitalize={'none'}
value={values.username}
autoFocus={true}
/>
<Text style={styles.errorStyle}>{errors.username}</Text>
</Item>
<Item>
<Input
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
style={{ color: 'white' }}
secureTextEntry={true}
placeholder="Şifre"
value={values.password} />
<Text style={styles.errorStyle}>{errors.password}</Text>
</Item>
<Button style={{ alignSelf: 'center', marginTop: 20, padding: 10 }} warning
block
onPress={handleSubmit}
>
<Text style={{ textAlign: 'center', justifyContent: 'center' }} > GİRİŞ YAP </Text>
</Button>
<View>
<Text
style={{ textAlign: 'center', justifyContent: 'center', color: '#999', marginTop: 150 }}
onPress={() => this.props.navigation.navigate('FSignup')}
>Henüz üye değilseniz. Buradan Kayıt Olun</Text>
</View>
</Form>
)}
</Formik>
}
</Content>
</Container>
</View>
</ScrollView>
);
};
};
const styles = StyleSheet.create({
bigContainer: {
backgroundColor: 'black',
flex: 1,
},
containerx: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
width:'100%'
},
loginText: {
color: '#c79816',
fontSize: 20,
alignSelf: 'center',
margin: 7,
fontWeight: "700"
},
emptyCont: {
flex: 1,
height: 100,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
errorStyle: {
fontSize: 15,
color: 'red'
},
});
Tried keyboardAvoidingView element in react native but i can not get a good result
Could you help me please?

you have to manually close it in this case either put the input autoFocus to false or use the manual react-native Keyboard handler like below:
import {Keyboard} from 'react-native'
Now when the component mounts we will close the keyboard.
componentDidMount(){
Keyboard.dismiss();
}

React Native Own font doesnt get applied to all elements

I wanted to implement my own font (from google) to use it inside my app. I loaded it and it works because some text gets changed by it. However some text doenst change which doesnt make sense to me.
I guess its a bug somehow maybe somebody has experienced this. Its a simple screen with simple code.
import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import COLORS from '../assets/COLORS';
import {TextInput} from 'react-native-gesture-handler';
class BMI extends Component {
render() {
const BMI = 20;
return (
<View style={styles.container}>
<Text style={styles.textStyle}> BMI - Calculator </Text>
<Text style={{color: COLORS.white, fontSize: 20}} >Dein momentaner BMI: <Text style={{color: COLORS.primary, fontSize: 24}} >{BMI}</Text> </Text>
<View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>AGE</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>HEIGHT</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>WEIGHT</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={{marginTop: 25, marginHorizontal: 15}}>
<Button onPress={() => alert("Hello")} title="Calculate" color={COLORS.lightB} />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
// justifyContent: "center",
backgroundColor: COLORS.darkBG,
},
textStyle: {
color: COLORS.lightB,
fontSize: 30,
fontWeight: 'bold',
marginVertical: 30,
fontFamily: "Pacifico"
},
InputContainer: {
justifyContent: 'space-around',
flexDirection: 'row',
width: '100%',
marginVertical: 20,
},
inputText: {
color: COLORS.white,
width: '30%',
marginLeft: 15,
fontSize: 18,
fontFamily: "Pacifico"
},
TextInput: {
backgroundColor: COLORS.primary,
width: '60%',
color: COLORS.white,
fontFamily: "Pacifico"
},
});
export default BMI;
As u can see I load pacifico and it works but only for this text ( see pic below ):

React Native, having problems with Flex Box

I'm practicing my React Native programming and I have an issue with the Flex Layout that I don't seem to understand pretty well
I wanted to make my test app look like this image below
Sample App
But in the end, this is what I get. There is some misalignment in the 'Home' text which suppose to be centered properly and a missing gap on the two right icons.
Sample Test App
I have tried putting padding on the two icon but have no luck with in.
Here's my code:
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<Icon name="menu" size={30} color="white" />
<Text style={styles.headerRowPage}>Home</Text>
<View style={styles.headerRowIcons}>
<Icon name="filter" size={30} color="white" />
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center',
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff',
},
headerRowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
},
headerRowIcons: {
//backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
},
headerRowPage: {
// marginLeft:20,
fontSize: 25,
fontWeight: '500',
color: '#fff',
}
});

To align childs of headerContainer vertically you should use alignItems with the code below :
headerContainer: {
display: 'flex',
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
alignItems: 'center'
}
A usefull resource to understand flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Remove too your marginTop on headerBrandingContainer styles.
EDIT:
Finally I think the best way is to make some modifications in the component tree so that the headerRowContainer items are all flex elements to 1. In this way, the title is always centered (the views having the same size) and we can now manage the placement of buttons without impacting the rest. It works perfectly for me.
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<View style={styles.buttonsContainerLeft}>
<Icon name="menu" size={30} color="white" />
</View>
<View style={styles.titleContainer}>
<Text style={styles.headerRowPage}>Home</Text>
</View>
<View style={styles.headerRowIcons}>
<Icon
name="filter"
size={30}
color="white"
style={styles.filterIcon}
/>
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center'
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center'
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff'
},
headerRowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
margin: 10
},
buttonsContainerLeft: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start'
},
titleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
headerRowIcons: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-end'
},
headerRowPage: {
fontSize: 25,
fontWeight: '500',
color: '#fff'
},
filterIcon: {
marginRight: 20
}
});