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?

create transparent overlay as background for bottom sheet

I had created bottom sheet using this [plugin][1]
Below is the code
[1]: https://github.com/gorhom/react-native-bottom-sheet
Issue is transparent overlay create opacity for bottomsheet also.
Is there any way i can create full screen transparent overlay and then proper bottomsheet without any opacity or tranparency.
const BottomSheet: React.FC<Props> = props => {
// ref
const bottomSheetRef = useRef<BottomSheet>(null);
const styles = StyleSheet.create({
overlay: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
opacity: 0.6,
elevation: 24,
zIndex: 24,
backgroundColor: 'black',
justifyContent: 'center',
},
container: {
flex: 1,
flexDirection: 'column',
width: '100%',
backgroundColor: 'red',
},
contentContainer: {
alignItems: 'center',
height: '100%',
overflow: 'visible',
},
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
bodyContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
buttonContainer: {
height: 88,
width: '100%',
alignItems: 'center',
},
backgroundContainer: {
backgroundColor: 'green',
},
});
return (
<View style={styles.overlay}>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={['50%', '50%']}
backgroundStyle={styles.backgroundContainer}
containerStyle={{
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
}}
onChange={handleSheetChanges}>
<View style={styles.imageContainer}>
<Image source={props.imageSource} style={styles.largeImage} />
</View>
<View style={styles.bodyContainer}>{props.body}</View>
<View style={styles.buttonContainer}>
<Divider style={styles.divider} />
<View style={styles.buttonRow}>
<TouchableOpacity
style={styles.bodyContainer}
onPress={() => {
props.onCancelAction();
}}>
<Text style={styles.cancelButtonText}>
{props.cancelText ? props.cancelText : 'Cancel'}
</Text>
</TouchableOpacity>
<Divider style={styles.verticalDivider} />
</View>
</View>
</BottomSheet>
</View>
);
};

fix a line's position in the center - scaled sheets

I am doing this to make a verticle line in between two numbers:
<View style={styles.ridesFriends}>
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>2</Text>
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
}
However, the line doesn't appear in the exact middle. This is because 132 is longer than the number 2. If I change 132 to just 3, then the line appears in the center. Is there any way to fix the line in the middle?
Updated:
<View style={styles.ridesFriends}>
{/* <View style={styles.numbersContainer}> */}
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>{numberOfFriends}</Text>
{/* </View> */}
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
num1: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
borderRightWidth: 1,
borderColor: '#909090',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: '900',
textShadowColor: '#000000',
textShadowRadius: 0.5,
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#E0E0E0',
//position: 'fixed',
},

As you have set the width of the parent to 100% you can easily wrap the number texts into views and set 50% each. The code would be like below
<View style={styles.ridesFriends}>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>2</Text>
</View>
</View>
Styles
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
numberWrap: {
width: '50%',
alignItems: 'center',
},

You can add a View component outside your text and style it with flex: 1 to equal separating space for your Text component.
Then you can add {alignItems: 'center',justifyContent: 'center'} in your Text container view to archive your component
Try mine:
<View style={styles.ridesFriends}>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>2</Text>
</View>
</View>
ridesFriends: {
paddingTop: 70,
alignItems: 'center',
flexDirection: 'row',
width: '100%',
marginBottom: 20,
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
Hope that help :)

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',
}

React Native backgroundColor overlay over image

I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.
render() {
return (
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
<Text>Hello</Text>
</Image>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
}
Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?

A cool thing you can do is drop an absolutely positioned view over it.
<View>
<Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'>
<Text>Hello</Text>
</Image>
<View style={styles.overlay} />
</View>
...
const styles = StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)'
}
})
absoluteFillObject is the same as
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none
docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

I was able to get this working thanks to #Kevin Velasco.
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
</Image>
<View style={styles.overlay} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageContainer: {
flex: 1,
width: null,
height: null,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(69,85,117,0.7)',
}
})

Here I use to solve my project, thansk to all:
<View>
<View
style = {{
//make overlay
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
//change this color to the other one which you want
backgroundColor: 'green',
}}
/>
<Image
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>

Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:
//Fetching the background image from online, you can use any image source of your choice.
const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };
// Setting the background image for the view:
<View style={styles.GoProBox}>
<ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
<View style={styles.overlayView}/>
<Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
<GoProButton />
</ImageBackground>
//Stylesheet
const styles = StyleSheet.create({
GoProBox: {
width: '95%',
height: 200,
margin: 5,
backgroundColor: '#00cc00',
borderRadius: 10,
alignSelf: 'center',
overflow: 'hidden'
},
goProBgImage: {
width: '100%', height: '100%',
},
goProText: {
textAlign: 'center',
fontSize: 20,
marginTop: 10,
fontWeight: 'bold',
padding: 10,
color: 'white'
},
GoProButton: {
height: 60,
width: 200,
backgroundColor: 'red',
borderRadius: 15,
alignSelf: 'center',
justifyContent: 'center',
top: 50
},
overlayView: {
height: "100%",
width: "100%",
position: 'absolute',
backgroundColor: 'rgba(0, 204, 0, 0.5)',
}
})

this is how i dit it to get it work for me
const visaCard = require('../Images/card_visa.png');
const [iscardBloqued, setIsCardBolqued] = useState(false);
const [hideInfos, setHideInfos] = useState(true);
Here is How the component looks like
<View style={styles.imageContainer}>
<ImageBackground
source={visaCard}
imageStyle={{ borderRadius: wp(3) }}
style={styles.imageStyle}
resizeMode="cover"
>
{hideInfos && (
<TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
<FText style={styles.whiteButtonText}>Afficher les infos</FText>
</TouchableOpacity>
)}
{iscardBloqued && (
<View style={styles.overlay}>
<TouchableOpacity
activeOpacity={0.7}
style={{ alignItems: 'center' }}
>
<Lock />
<FText style={styles.overlayText}>Carte bloqueé</FText>
</TouchableOpacity>
</View>
)}
</ImageBackground>
</View>
And her is my Style page: "i prefered to separate it from my component"
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
alignSelf: 'center',
marginTop: hp(3),
},
imageStyle: {
height: hp(25),
width: wp(85),
},
cardWhiteButton: {
marginHorizontal: wp(8),
backgroundColor: 'white',
marginTop: hp(17),
height: hp(5),
width: wp(32),
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp(5),
},
whiteButtonText: {
fontSize: hp(1.4),
color: 'white',
fontFamily: 'Roboto',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.89)',
justifyContent: 'center',
alignItems: 'center',
borderRadius: wp(3),
},
overlayText: {
color: 'white',
fontSize: hp(1.6),
fontFamily: 'Roboto',
marginTop: hp(2),
},
});