We Keep Coding

KeyboardAwareScrollView and KeyboardAvoidingView Both just compress the inputs together and don't move anything else on the screen

I have an app that I am working on and am having trouble with the android styling. Everything looked fine on iOS but then when I used it on an android emulator the inputs were squished towards the top and all of the text was overlapping. So I'm trying to figure out how to use the KeyboardAwareScrollView or the KeyboardAvoidingView to either move absolutely everything on the page up or at least move the content under the header up and under the header so that you can still see the input. Here are some screen shots to show what is currently happening.
The screen when inputs are not focused on:
The Screen when an input is focused on:
Here is my screen's code. You can see by the commented out sections that I also tried placing these keyboard aware views on almost the very outside of my screen in an attempt to move the entire screen's content. Instead, it continued to behave in the same way.
return (
<SafeAreaView edges={['top']} style={{ flex: 1, backgroundColor: theme.colors.primary }}>
<SafeAreaView edges={['left', 'right', 'bottom']} style={{ flex: 1, backgroundColor: theme.colors['Surface'] }}>
<StatusBar barStyle="light-content" backgroundColor={theme.colors.primary} />
{/* <KeyboardAvoidingView
style={{ width: '100%', height: Dimensions.get('window').height, backgroundColor: theme.colors.Background, justifyContent: 'flex-end' }}
behavior={Platform.OS === "ios" ? "padding" : "padding"}
contentContainerStyle={{ width: '100%', height: '100%'}}
enabled={true}
keyboardVerticalOffset={-120}
> */}
{/* <KeyboardAwareScrollView
extraHeight={0}
enableOnAndroid={true}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
contentContainerStyle={{ height: Dimensions.get('window').height }}
> */}
<ScreenContainer hasSafeArea={false} scrollable={false}>
<View style={[styles.topBlueContainer, { backgroundColor: theme.colors.primary, position: 'absolute', zIndex: 99 }]}>
{/* Logo */}
<View style={styles.logoContainer}>
<View style={styles.Viewfe3a5f26}>
<Text
style={[styles.ConnectLogo, { color: theme.colors['Background'] }]}
>
{'company'}
</Text>
<Text
style={[styles.WalletLogo, { color: theme.colors['Background'] }]}
>
{'name'}
</Text>
<View style={styles.View63f8fbfb}>
<Icon
name={'AntDesign/trademark'}
size={8}
color={theme.colors['Background']}
/>
</View>
</View>
</View>
{/* header row */}
<View style={[styles.headerRow, {}]}>
<Touchable
onPress={() => {
navigation.navigate('PortfolioDetailsScreen');
}}
style={[styles.backArrowBtnContainer, {}]}
>
<Icon
name={'AntDesign/left'}
size={36}
color={theme.colors['Background']}
/>
</Touchable>
<View style={[styles.currencyTitleContainer, {}]}>
<Text style={[styles.currencyTitleText, { color: theme.colors['Background'] }]}> SEND {selectedToken.symbol}</Text>
</View>
<View style={styles.backArrowBtnContainer} />
</View>
</View>
{/* Page Content */}
<KeyboardAwareScrollView
extraScrollHeight={-220}
style={[
styles.contentContainer,
{
height: '100%',
paddingTop: 120,
}
]}
contentContainerStyle={
{
alignItems: 'center',
flex: 1
}
}
resetScrollToCoords={{ x: 0, y: 0 }}
enableOnAndroid={true}
viewIsInsideTabBar={true}
>
{/* Total Amnt Container */}
<View style={{ width: '100%', height: '25%', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 56, fontFamily: 'TitilliumWeb_600SemiBold', textAlign: 'center', marginBottom: -10 }}>{selectedToken.balance.toString().slice(0, 10)}</Text>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_400Regular', textAlign: 'center', color: '#979797' }}>Current Balance</Text>
</View>
{/* Amnt To Send Container */}
<View style={{ width: '100%', height: '25%' }}>
<View style={{ width: '100%', height: '50%', justifyContent: 'flex-end', alignItems: 'center' }}>
<TextInput
onChangeText={newTextInputValue => {
try {
if (newTextInputValue) {
if (newTextInputValue === '.') {
setAmountToSend('0.');
} else if (parseFloat(newTextInputValue) <= parseFloat(selectedToken.balance)) {
setAmountToSend(newTextInputValue);
} else {
Alert.alert('Not Enough Funds', reachedMaxButtons);
}
} else {
setAmountToSend(newTextInputValue);
}
} catch (err) {
console.error(err);
}
}}
style={[
styles.amountInput,
{ borderColor: theme.colors.divider },
]}
placeholder={'0.00'}
value={amountToSend}
editable={true}
placeholderTextColor={theme.colors['Medium']}
keyboardType={'decimal-pad'}
/>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<View style={{ width: 100 }}/>
<View>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_400Regular', textAlign: 'center', color: '#979797' }}>Amount</Text>
</View>
<Touchable
style={{
width: 100,
height: 30,
backgroundColor: theme.colors['Background'],
borderWidth: 1,
borderRadius: 23,
borderColor: '#347AF0',
alignItems: 'center',
justifyContent: 'center'
}}
onPress={() => {
setAmountToSend(selectedToken.balance.toString());
}}
>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_600SemiBold', color: '#347AF0' }}>Max</Text>
</Touchable>
</View>
</View>
{/* Address Container */}
<View style={{ width: '100%', height: '25%' }}>
<View style={{ width: '100%', height: '50%', justifyContent: 'flex-end', alignItems: 'flex-start', alignItems: 'center' }}>
<TextInput
style={styles.addressInput}
placeholder={'0x43452...'}
placeholderTextColor={theme.colors['Medium']}
editable={true}
value={addressToSendTo}
onChangeText={newAddressValue => {
try {
setAddressToSendTo(newAddressValue);
} catch (err) {
console.error(err);
}
}}
/>
</View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginTop: 10 }}>
<View style={{ width: 100 }}/>
<View>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_400Regular', textAlign: 'center', color: '#979797' }}>Recipient</Text>
</View>
<Touchable
style={{
width: 100,
height: 30,
backgroundColor: theme.colors['Background'],
borderWidth: 1,
borderRadius: 23,
borderColor: '#347AF0',
alignItems: 'center',
justifyContent: 'center'
}}
onPress={() => {
navigation.navigate('CodeScannerScreen', { 'screen': 'SendTokenUpdatedScreen' });
}}
>
<Text style={{ fontSize: 16, fontFamily: 'TitilliumWeb_600SemiBold', color: '#347AF0' }}>Scan QR</Text>
</Touchable>
</View>
</View>
{/* Next Btn Container */}
<View style={{ width: '100%', height: '25%', alignItems: 'center', justifyContent: 'flex-start' }}>
<Button
title={'Next'}
style={{
width: '100%',
maxWidth: 300,
height: 46,
fontFamily: 'TitilliumWeb_600SemiBold',
fontSize: 19,
color: theme.colors['Background'],
borderRadius: 23,
}}
onPress={() => {
console.log('amount', amountToSend)
console.log('amount there: ', amountToSend === '')
navigation.navigate('ConfirmSendTokenScreen', {
'amountToSend': amountToSend,
'addressToSendTo': addressToSendTo,
'selectedToken': selectedToken,
});
}}
disabled={addressToSendTo === '' || amountToSend === ''}
/>
</View>
</KeyboardAwareScrollView>
</ScreenContainer>
{/* </KeyboardAvoidingView> */}
{/* </KeyboardAwareScrollView> */}
</SafeAreaView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
logoContainer: {
paddingLeft: 15,
},
Viewfe3a5f26: {
alignItems: 'flex-start',
flexDirection: 'row',
},
WalletLogo: {
alignSelf: 'flex-start',
fontSize: 28,
fontFamily: 'ProximaNova-Bold'
},
ConnectLogo: {
alignSelf: 'flex-end',
fontSize: 28,
paddingRight: 5,
fontFamily: 'ProximaNova-Regular'
},
View63f8fbfb: {
paddingTop: 5,
},
topBlueContainer: {
height: 120,
width: '100%'
},
headerRow: {
width: '100%',
flexDirection: 'row',
marginTop: 20,
},
backArrowBtnContainer: {
paddingLeft: 12,
justifyContent: 'center',
width: '15%',
},
currencyTitleContainer: {
width: 200,
alignItems: 'center',
width: '70%'
},
currencyTitleText: {
fontFamily: 'TitilliumWeb_700Bold',
fontSize: 36
},
contentContainer: {
width: '100%',
paddingLeft: 20,
paddingRight: 20,
},
amountInput: {
fontSize: 56,
width: '100%',
height: 56,
textAlign: 'center',
borderBottomWidth: 1,
fontFamily: 'TitilliumWeb_600SemiBold',
},
amountLabel: {
fontFamily: 'TitilliumWeb_400Regular',
color: '#979797',
fontSize: 16,
},
scanQRBtn: {
width: 100,
height: 30,
borderRadius: 23,
borderWidth: 1,
},
addressInput: {
fontSize: 56,
width: '100%',
height: 56,
marginTop: 10,
textAlign: 'center',
borderBottomWidth: 1,
fontFamily: 'TitilliumWeb_600SemiBold',
borderColor: '#CFD2D8'
},
sendData: {
fontFamily: 'TitilliumWeb_400Regular',
fontSize: 20,
},
splitContainer: {
width: '100%',
height: '50%',
justifyContent: 'space-around',
alignItems: 'center',
},
sendCurrencyBtn: {
width: 300,
fontFamily: 'TitilliumWeb_600SemiBold',
fontSize: 19,
height: 46,
borderRadius: 25,
marginBottom: 20
},
});
Can anyone help me either move the current balance section and the appropriate input up and out of the way or move the entire screen's content up and out of the way just up to where the focused input is just above the keyboard?

add Text right bottom of the its parent

I want to add a clock to my component right-bottom here is my code :
import React from "react";
import { StyleSheet, View, Image, Text } from "react-native";
import CircleCard from "./CircleCard";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View>
<CircleCard />{// my component}
</View>
<View
style={{
flexDirection: "row",
flex: 1,
flexWrap: "wrap",
flexShrink: 1,
}}
>
<Text style={{ color: "gray" }} numberOfLines={1}>{//For parsing }
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters {//The message part}
</Text>
<Text style={{ position: "absolute", bottom: 0, right: 0 }}>18:48</Text> {//The clock bottom right}
</View>
<View style={{ margin: 15 }}> {//For Icon}
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: "100%",
height: 80,
margin: 5,
flexDirection: "row",
flexWrap: "wrap",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
justifyContent: "space-between",
},
});
i added it at the end but now the First and Second Text overlaped.
Also an image for my goal:
Note2 : I read that the position absolute violate the flex-box but i do not find any style for moving the Text component to end. If there is an other way. i will be glad.

I don't know if it is what you want actually but here is my solution:
import React from "react";
import { StyleSheet, View, Image, Text, Dimensions } from "react-native";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View style={styles.image}>
<Text style={{ fontSize: 34 }}>B</Text>
</View>
<View
style={styles.rowContent}
>
<Text style={styles.longText} ellipsizeMode='tail' numberOfLines={1}>
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters
</Text>
<Text style={styles.time}>18:48</Text>
</View>
<View style={{ margin: 15 }}>
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 30,
width: '100%',
height: 80,
margin: 5,
flexDirection: "row",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
},
image: {
alignItems: 'center',
justifyContent: "center",
width: 70,
padding: 10,
},
rowContent: {
justifyContent: "center",
alignItems: "center",
flexDirection: 'column',
flex: 1
},
longText: {
color: "gray",
alignSelf: 'stretch',
justifyContent: 'center'
},
time: { alignSelf: 'flex-end' }
});

React Native - Modal Trigger button always visible

I am trying to make an Action Button on the tapbar which deploys multiple items using Modal. The issue I have is that I want the action button to stay visible so the user can toggle between the modal.
Here you can see the action button visible
obviously disappears once the modal is activated.
Tried:
On the modal make another button, but on different device sizes the button moves.
Code
import React, {useState} from 'react';
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';
const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
: console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);
Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
const TabBarAdvancedButton = ({bgColor, ...props}) => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<View style={styles.container} pointerEvents="box-none">
<TabBg color={'white'} style={styles.background} />
<TouchableOpacity
style={styles.button}
onPress={props.onPress}
activeOpacity={0.9}
onPress={() => setModalVisible(true)}>
<Entypo name="plus" style={styles.buttonIcon} />
</TouchableOpacity>
</View>
<Modal
backdropOpacity={0.8}
animationIn="fadeIn"
animationOut="fadeOut"
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}>
{/*close button */}
<View style={styles.content}>
<TouchableOpacity
style={{
position: 'absolute',
backgroundColor: 'red',
alignSelf: 'center',
}}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
marginBottom: height * 0.02,
}}>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
};
export default TabBarAdvancedButton;
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 75,
alignItems: 'center',
},
background: {
position: 'absolute',
top: 0,
},
button: {
top: -22.5,
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 27,
backgroundColor: colors.PRIMARY_COLOR_DARK,
},
buttonIcon: {
fontSize: 16,
color: '#F6F7EB',
},
content: {
backgroundColor: 'transparent',
padding: 60,
justifyContent: 'space-evenly',
alignItems: 'center',
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: 'row',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: 'flex-end',
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: '#468CFF',
borderWidth: 3.5,
backgroundColor: '#366ABF',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
},
});

You can try the below code, you should be adding the action button inside the modal as well, so that will be displayed inside modal.
export default ActionButton = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
<View style={styles.container}>
<Modal
backdropOpacity={0.8}
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}
>
{/*close button */}
<View style={styles.content}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "space-around",
}}
>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={[styles.buttonItem, { bottom: 130 }]}
>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
</View>
</View>
</Modal>
</View>
</>
);
};
const styles = StyleSheet.create({
content: {
backgroundColor: "transparent",
padding: 60,
justifyContent: "space-evenly",
alignItems: "center",
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: "row",
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: "flex-end",
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: "#468CFF",
borderWidth: 3.5,
backgroundColor: "#366ABF",
bottom: 50,
justifyContent: "center",
alignItems: "center",
},
});

react native: there is an issue while press TouchableOpacity and display the time inside the middle square

there some issue while i try to push the TouchableOpacity button coz its not let me press it and also after i press it so i need to see the time picker and choose a time as i want and its shuold be display inside the square view in the middle.
what is the way to do it coz i got stacked right now.
I add picture of the screen :
import React, { useState } from 'react';
import { Text, View, Button, Platform, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import { useRoute, useNavigation } from '#react-navigation/native';
import DateTimePicker from '#react-native-community/datetimepicker';
import Icon from 'react-native-ionicons';
function NetuneyDigum() {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('time');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
setShow(Platform.OS === 'ios');
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showTimepicker = () => {
showMode('time');
};
return (
<>
<View
style={{
flex: 1,
alignItems: 'center',
backgroundColor: '#cbced4',
}}
>
<View
style={{
paddingTop: 30,
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 50,
right: 30,
}}
>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 10,
}}
>
<Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
THE TIME IS :
</Text>
</View>
<View
style={{
height: 50,
width: 100,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
// left: 40,
}}
>
<Text
style={{
fontSize: 20,
fontWeight: 'bold',
color: '#368fc7',
paddingLeft: 10,
}}
>
{show}
</Text>
<TouchableOpacity
onPress={showTimepicker}
style={{
height: 60,
width: 60,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
left: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="md-time" size={50} color="black" />
</TouchableOpacity>
</View>
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
</>
);
}

you wrong in TouchableOpacity position in code and bad way to styling , set left attribute to zero and move your TouchableOpacity outside of current parent
<View
style={{
paddingTop: 30,
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 50,
right: 30,
}}
>
<View
style={{
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingRight: 10,
}}
>
<Text style={{ fontWeight: 'bold', fontSize: 18, color: 'black' }}>
THE TIME IS :
</Text>
</View>
<View
style={{
height: 50,
width: 100,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
// left: 40,
}}
>
<Text
style={{
fontSize: 20,
fontWeight: 'bold',
color: '#368fc7',
paddingLeft: 10,
}}
>
{show}
</Text>
</View>
//move touchable opacity here
<TouchableOpacity
onPress={showTimepicker}
style={{
height: 60,
width: 60,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
//left: 100, remove this line
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon name="md-time" size={50} color="black" />
</TouchableOpacity>
</View>

How to make a modal component the center of the screen?

I have a modal Component that I am trying to put in the center of the screen.
In my view tag with style={styles.containerStyle} the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add flexDirection: 'row' to the containerStyle it moves it to the middle horizontally but to the top vertically.
This is my modal component:
class ItemInformationModal extends Component {
onNotesChange(text) {
this.props.notesChanged(text);
}
render() {
return (
<Modal
transparent
animationType='fade'
visible={this.props.itemModalVisible}
>
<View style={styles.containerStyle}>
<View style={styles.modalContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styles.itemTitle}>{this.props.currItem.text}</Text>
<View style={{ padding: 5 }}>
<DatePickerIOS />
</View>
</View>
<View style={{ padding: 5 }}>
<Feather
name="x-square"
size={35}
color={'#db5461'}
onPress={() => this.props.closeItemModal()}
/>
</View>
</View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
value={this.props.currItem.notes}
multiline
style={styles.notesInput}
onChangeText={this.onNotesChange.bind(this)}
/>
</View>
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
alignSelf: 'baseline',
},
notesInput: {
height: 130,
borderWidth: 1,
borderRadius: 10,
borderColor: '#28313b',
padding: 10,
color: '#28313b'
},
itemTitle: {
fontSize: 20,
color: '#28313b',
padding: 10
}
});

You can remove alignSelf
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems:"center"
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
}