Develop Reference

react-native: how to make keyboard on top of the component?

I have a bottomSheet component and when the keyboard is open the view of the bottomSheet get round.
The component without opening keyboard:
but when keybored is opened:
component code:
<BottomSheet
visible={isOpen}
onBackButtonPress={() => {
setToUpdate(undefined)
setIsOpen(false);
}}
>
<View style={[buttomSheetStyles.bottomNavigationView, { height: "80%", backgroundColor: Colors.white500 }]}>
<View style={[buttomSheetStyles.buttomSheetContainer, { alignItems: 'center', justifyContent: 'space-around' }]}>
<Image source={require('../assets/return.png')} resizeMode='contain' style={{ position: 'absolute', top: -100 }} />
<View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 30, marginTop: 80 }}>
<Text style={{ fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold', fontSize: 17, textAlign: 'center' }}>{t("returnsScreen:NewReturnHeader")}</Text>
</View>
<Formik
validationSchema={returnValidationSchema}
initialValues={(toUpdate === undefined) ?
{ packageQuantity: '', unitQuantity: '', cause: '', image: '' } :
{ packageQuantity: toUpdate.value.productQuantity.packageQuantity.toString(), unitQuantity: toUpdate.value.productQuantity.unitQuantity.toString(), cause: toUpdate.value.cause, image: toUpdate.value.image.fileContent }}
onSubmit={(values) => {
console.log(values.cause)
if (toUpdate === undefined)
onSubmit(values);
else
onSubmit(values, toUpdate.index);
setToUpdate(undefined)
}}
>
{({
handleChange,
handleBlur,
handleSubmit,
setValues,
setFieldValue,
touched,
values,
errors,
isValid,
dirty,
}) => (
<View style={{ flex: 1, }}>
<View
style={{
flex: 1,
}}
>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text style={{ flex: 2.5, textAlign: 'left', paddingLeft: 10, color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:products")}</Text>
<Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:package")}</Text>
<Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:units")}</Text>
</View>
<View style={{
flex: 3, justifyContent: "center", alignItems: "center", flexDirection: 'row'
}}>
<CachedImage
source={{
uri: `${env.apiUrl.concat(env.productImagePngById.replace(":productId", orderItem.product!.id)).concat("?thumbnail=true")}`, // (required) -- URI of the image to be cached
expiresIn: 43200, // 12 hours in seconds (optional), if not set -- will never expire and will be managed by the OS
}}
cacheKey={`${orderItem.product!.id}-thumbnail`} // (required) -- key to store image locally
placeholderContent={( // (optional) -- shows while the image is loading
<Image
source={{
uri: productDefaultImage
}}
resizeMode="contain"
style={{ width: 100, height: 70 }}
/>
)}
resizeMode="contain" // pass-through to <Image /> tag
style={{ width: 100, height: 70 }}
/>
<View style={{ flex: 5, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ flex: 5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
<View style={{ flex: 1, justifyContent: 'center', marginStart: 7 }}>
<Text style={styles.nameStyleText}>{I18nManager.isRTL ? orderItem.product!.rtlName : orderItem.product!.name}</Text>
</View>
<View style={{ flex: 1.5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
<Input
style={{ alignItems: 'center', backgroundColor: Colors.white500 }}
value={values.packageQuantity.toString()}
onChangeText={handleChange('packageQuantity')}
status={
touched.packageQuantity
? !errors.packageQuantity
? "success"
: "danger"
: "warning"
}
keyboardType="numeric"
/>
<Input
style={{ alignItems: 'center', backgroundColor: Colors.white500 }}
value={values.unitQuantity.toString()}
onChangeText={handleChange('unitQuantity')}
status={
touched.unitQuantity
? !errors.unitQuantity
? "success"
: "danger"
: "warning"
}
keyboardType="numeric"
/>
</View>
</View>
</View>
</View>
</View>
<View style={{ flex: 0.5, borderColor: Colors.black900, borderWidth: 1 }}>
<Picker
prompt={t("common:selectReason")}
mode="dropdown"
selectedValue={values.cause}
onValueChange={(e) => {
console.log("e: ", e)
setFieldValue('cause', e)
}
}>
<Picker.Item enabled={false} label={t("common:selectReason")} value={``} />
<Picker.Item label={t("returnsScreen:DAMAGED")} value={ReturnProductEnum.DAMAGED} />
<Picker.Item label={t("returnsScreen:UNLOADED")} value={ReturnProductEnum.UNLOADED} />
<Picker.Item label={t("returnsScreen:EXPIRED")} value={ReturnProductEnum.EXPIRED} />
</Picker>
</View>
<View style={{ flex: 2 }}>
<CameraInput
imageCallback={handleChange("image")}
openCamera={isCameraOpen}
setOpenCamera={setIsCameraOpen}
status={errors.image}
image={values.image}
/>
</View>
<Button
style={{
flex: 0.5,
width: '100%',
borderRadius: 9,
height: 65,
justifyContent: "space-evenly",
}}
status='info'
disabled={!isValid || !dirty || loading}
onPress={() => handleSubmit()}
accessoryRight={loading ? <View style={{ justifyContent: 'center', alignItems: 'center' }}><Spinner size='small' status='info' /></View> : IconComponent(
(I18nManager.isRTL ? evaIcons.backArrow : evaIcons.frontArrow),
Colors.white500
)}
>
{(props) => (
<Text
{...props}
style={{
fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold',
color: Colors.white500,
fontSize: 17,
marginLeft: 35,
}}
>
{t("common:submit")}
</Text>
)}
</Button>
</View>
)}
</Formik>
</View>
</View>
</BottomSheet >
is there's any way I can make keyboard, on top of the bottomSheet?
or a way to make the bottomsheet scrollable...
or if there's any better way to atchive the same result ?

How to update text using TextInput

I'm having some troubles trying to figure out how to edit a text thats already been made.
I have done most of the things and the one i'm stuck at is the button that updates the text to the new updated text. I can see the updated text when I use console.log but it doesn't update the text. Thats still the same. Below you can see the full code and I think the updateTodo function is done wrong.
export default function App() {
const [updateTaskId, setUpdateTaskId] = useState('');
const [updateTaskTitle, setUpdateTaskTitle] = useState('');
const [todos, setTodos] = useState([]);
const updateTodo = () => {
const todoAsync = [
...todos,
{
key: updateTaskId,
name: updateTaskTitle,
},
];
setTodos(todoAsync);
};
const renderitem = ({item}) => {
return (
<View
style={{
flex: 1,
backgroundColor: colors.card,
margin: 10,
elevation: 1,
borderRadius: 10,
padding: 10,
}}>
<View style={{flexDirection: 'row'}}>
<Fontisto
name={item.isChecked ? 'checkbox-active' : 'checkbox-passive'}
size={20}
color={colors.text}
onPress={() => checkTodo(item.key)}
/>
<TouchableOpacity
onLongPress={() => {
setUpdateModal(true);
setUpdateTaskTitle(item.name);
}}>
<Text
style={{
color: colors.text,
marginLeft: 20,
marginRight: 20,
}}>
{item.name}
</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<Fontisto name="date" size={20} color={colors.text} />
<Text style={{marginLeft: 20, color: colors.text}}>{item.date}</Text>
</View>
<View
style={{
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Feather
name={item.notification ? 'bell-off' : 'bell'}
size={20}
color={colors.text}
onPress={() => checkNotification(item.key)}
/>
<Fontisto
name="trash"
size={20}
color={colors.text}
onPress={() => {
setModalVisible(true);
setDetails(item);
}}
/>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: colors.background}}>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={updateModal}
onRequestClose={() => {
setUpdateModal(!updateModal);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View style={{}}>
<TextInput
style={{backgroundColor: colors.background, marginTop: 10}}
onChangeText={name => setUpdateTaskTitle(name)}
value={updateTaskTitle}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 50,
}}>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
setUpdateTaskTitle('');
}}>
<Text>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
setUpdateModal(false);
updateTodo(...todos, {name: updateTaskTitle});
setUpdateTaskTitle('');
console.log(updateTaskTitle);
}}>
<Text>Update</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<Modal
hardwareAccelerated={true}
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.8)',
}}>
<View
style={{
backgroundColor: colors.Modal,
padding: 35,
borderRadius: 10,
width: '80%',
height: '40%',
}}>
<View>
<Text style={{fontSize: 20, color: colors.text}}>Delete?</Text>
</View>
<View
style={{
flexDirection: 'row',
marginTop: 15,
}}>
<Text style={{color: colors.text}}>Completed: </Text>
<Fontisto
style={{marginLeft: 20}}
name={
details.isChecked ? 'checkbox-active' : 'checkbox-passive'
}
size={15}
color={colors.text}
/>
</View>
<View style={{flexDirection: 'row', marginTop: 20}}>
<Text style={{color: colors.text}}>Title: </Text>
<Text
numberOfLines={1}
style={{marginLeft: 15, marginRight: 15, color: colors.text}}>
{details.name}
</Text>
</View>
<Text style={{marginTop: 20, color: colors.text}}>
Created: {details.date}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
marginTop: 30,
}}>
<TouchableOpacity
onPress={() => {
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Close</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
deleteTodo(details.key);
setModalVisible(false);
setDetails('');
}}>
<Text style={{color: colors.text}}>Delete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: colors.Textinput,
elevation: 12,
}}>
<TextInput
style={{
flex: 1,
backgroundColor: '#fff',
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
}}
placeholder="What Tododay?"
placeholderTextColor="#000"
onChangeText={value => setTitle(value)}
value={title}
autoCapitalize="words"
/>
<Entypo
style={{
marginLeft: 1,
padding: 13,
backgroundColor: '#fff',
height: 49,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
}}
name="add-to-list"
size={25}
color="#000"
onPress={() => addTodo()}
/>
</View>
<View style={{flex: 1}}>
<FlatList
data={todos}
renderItem={renderitem}
ListEmptyComponent={emptyListComponent}
/>
</View>
</View>
);
}

Here is what you need to do.
make a copy of all todos
filter out the todo that you are about to update out of the todos array
concat a new todo with the new text to the array of todos
it should render as expected
const updateTodo = () => {
const todoAsync = [
...todos,
].filter((item) => item.id !== updateTaskId).concat([{
key: updateTaskId,
name: updateTaskTitle,
}])
setTodos(todoAsync);
};
Try this if you want to keep the same todo on the screen but only update the object key for name.
const updateTodo = () => {
const todoAsync = [
...todos,
].map((item) => {
const { key } = item;
if(key === updateTaskId} {
// return updated object
return {
key,
name: updateTaskTitle,
}
}
else return item;
}
setTodos(todoAsync);
};

React native KeyboardAvoidingView and ScrollView won't marginTop auto

so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.
my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.
This is the screen code:
<SafeAreaView style={styles.root}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior='padding'
keyboardVerticalOffset={-200}>
<ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
<Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
<BgImage path={require('../../../assets/images/phone-city.png')} />
<View style={styles.container}>
<Text style={styles.title}>Från</Text>
<TextInput
ref={inputRef}
placeholder='dit namn'
autoCorrect={false}
onSubmitEditing={() =>
props.navigation.navigate('Person Selected')
}
returnKeyType='next'
style={styles.textInput}
placeholderTextColor={placeholderTextColor}
/>
<Text style={styles.paragraph}>
Skriv in vem du är så mormor vet vem träningsprogrammet kommer
ifrån.
</Text>
</View>
<NavButton
style={styles.button}
title='Nästa'
onPress={() => props.navigation.navigate('Capture Image')}
/>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
this is the screen styles:
const styles = StyleSheet.create({
root: {
flex: 1,
backgroundColor: colors.blue
},
container: {
marginHorizontal: 20
},
title: {
color: colors.white,
fontSize: wp('15%')
},
textInput: {
color: colors.white,
fontSize: wp('15%'),
lineHeight: 60,
opacity: 0.5
},
paragraph: {
color: colors.white,
fontSize: wp('6%')
},
button: {
marginHorizontal: 20,
marginBottom: hp('6%'),
alignSelf: 'flex-end'
}
});
these are the navButton code:
<View style={[styles.navButtonContainer, props.containerStyle]}>
<TouchableOpacity
style={[
styles.navButton,
props.style,
{ backgroundColor: dynamicBackgroundColor }
]}
onPress={props.onPress}>
<Text style={[styles.title, { color: dynamicColor }]}>
{props.title}
</Text>
{DynamicIcon}
</TouchableOpacity>
</View>
this are the navbutton styles:
const styles = StyleSheet.create({
navButtonContainer: {
marginTop: 'auto'
},
navButton: {
backgroundColor: colors.blue,
marginLeft: 'auto',
width: wp('45%'),
height: wp('13%'),
flexDirection: 'row',
justifyContent: 'space-between',
borderRadius: 500,
paddingHorizontal: wp('5%'),
alignItems: 'center'
},
title: {
color: colors.white,
fontSize: wp('6%')
}
});
so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?
regards.

react native firebase async await parellel with promise.all

import fire from '../config/fire';
const db = fire.firestore();
class InitialDb extends Component {
constructor(props) {
super(props);
this.state = {
schools: '',
students: '',
};
}
async componentDidMount() {
const { size: schools } = await db.collection('schools').get();
const { size: students } = await db.collection('students').get();
this.setState({ schools, students});
}
render() {
return (
<SafeAreaView>
{/* <StatusBar translucent backgroundColor='#1b75ce' />
<HC title='Dashboard' /> */}
<BackButton />
<View style={{ paddingTop: 10, marginBottom: 20 }}>
<View style={{ flexDirection: 'row' }}>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/schools.png')}
/>
<Text style={{ textAlign: 'center' }}>
Schools:{this.state.schools}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/asd.png')}
/>
<Text style={{ textAlign: 'center' }}>
Students:{this.state.students}
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
<View
style={{ flexDirection: 'row' }}
// style={styles.basic1Style}
>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/def.png')}
/>
<Text style={{ textAlign: 'center' }}>
Office:50
</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
<View style={styles.widthstyle}>
<TouchableOpacity>
<Card>
<CardItem>
<Body>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 30, height: 30 }}
source={require('../assets/abc.png')}
/>
<Text style={{ textAlign: 'center' }}>Attended:50</Text>
</View>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
</View>
{/* <Text style={{ textAlign: "center" }}>
Swipe from left to right for menu
</Text> */}
<View style={{ marginBottom: 2 }}>
<Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 5 }}>
Search
</Text>
</View>
<Form style={{ marginLeft: 20 }}>
<View style={{ flexDirection: 'row' }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Division</Label>
<Input />
</Item>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Area</Label>
<Input />
</Item>
</View>
<View style={{ flexDirection: 'row', paddingTop: 20 }}>
<Item style={{ paddingLeft: 20, width: '40%' }}>
<Label style={{ textAlign: 'left' }}>Gang</Label>
<Input />
</Item>
<Item
style={{
borderBottomColor: 'white',
}}
>
<Button info style={{ marginLeft: 25 }}>
<Text> Search </Text>
</Button>
</Item>
</View>
</Form>
{/*<View style={{ flex: 1, marginTop: 3, left: 0, right: 0, bottom: 0 }}>
<MapView
initialRegion={{
latitude: 12.93092,
longitude: 77.602156,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
style={styles.mapStyle}
></MapView>
</View>
*/}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
basic1Style: {
// flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
widthstyle: {
width: Dimensions.get('window').width / 2,
},
mapStyle: {
position: 'absolute',
top: 3,
left: 0,
right: 0,
bottom: 0,
},
});
export default InitialDb;
**This code above is working synchronously and also in series manner. I want this to be in async and await because this is freezing the UI. And also it should update the all 2 state objects after getting the size of all those 2 firestore collections using promise.all.
Here I have updated the code Please check it again **

PROBLEM
The problem here is basically your firebase is initializing on every hot-module reload. You only need to initialize once per App.
So basically, you could wrap your firebase initialization with try-catch and swallow the error.
try {
firebase.initializeApp({
/** config here **/
});
} catch(err) {
console.log(err);
}

Keyboard Avoiding View - React-Native?

I have a sign-up screen "Inputs", I want when user select input doesn't hide other, so I wrap it inside <KeyboardAvoidingView> and set behavior "padding" but after choosing some input I see a View cover all my content so I can't see any things "just white View"
So maybe I made something wrong when using it, how can I handle it?
ScreenShot
here's my code
<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 200,
})()}>
<ScrollView>
<View style={styles.imgContainer}>
<Image
style={styles.imgStyle}
resizeMode="cover"
source={require('../../assets/Logo.png')}
/>
</View>
<View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-person"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({userName: value})}
value={userName}
style={styles.inputStyle}
placeholder="Name"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.NameValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-at"
size={20}
color="#ddf"
/>
<TextInput
onChangeText={value => this.setState({email: value})}
value={email}
style={styles.inputStyle}
placeholder="Email"
keyboardType="email-address"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.emailValid}</Text>
</View>
<View style={styles.inputContainer}>
<Icon
style={styles.iconStyle}
name="md-call"
size={20}
color="#ddf"
/>
<TextInput
style={styles.inputStyle}
placeholder="mobile"
onChangeText={value => this.setState({phoneNumber: value})}
value={phoneNumber}
keyboardType="phone-pad"
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.phoneValid}</Text>
</View>
<View style={{...styles.inputContainer, marginBottom: 0}}>
<Icon
style={styles.iconStyle}
name="md-lock"
size={20}
color="#ddf"
/>
<TextInput
secureTextEntry
style={styles.inputStyle}
placeholder="Password"
value={password}
onChangeText={value => this.setState({password: value})}
/>
</View>
<View
style={{
marginTop: 0,
marginLeft: 16,
marginBottom: 0,
}}>
<Text>{this.state.passwordValid}</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
onPress={() => this.signUp()}
style={styles.btnStyle}>
<Text style={[styles.textStyle, {color: '#fff', fontSize: 20}]}>
Sign Up
</Text>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={[styles.textStyle, {opacity: 0.7}]}>
Do you have account?
</Text>
<TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
<Text style={styles.textStyle}> sign In </Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
Style
const styles = StyleSheet.create({
container: {
flex: 1,
},
imgContainer: {alignItems: 'center', marginVertical: 25},
imgStyle: {width: 250, height: 150},
inputContainer: {
margin: 15,
marginBottom: 20,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 30,
flexDirection: 'row',
alignItems: 'center',
},
iconStyle: {
marginLeft: 15,
},
inputStyle: {
padding: 10,
width: '85%',
textAlign: I18nManager.isRTL ? 'right' : 'left',
},
buttonsContainer: {
margin: 15,
marginBottom: 20,
justifyContent: 'flex-end',
},
btnStyle: {
backgroundColor: '#1E558E',
alignItems: 'center',
justifyContent: 'center',
padding: 15,
borderRadius: 30,
},
textContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 25,
},
textStyle: {color: '#1E558E', fontSize: 17},
});