We Keep Coding

How can i style my buttons and text properly?

How can i style to make both the buttons at the bottom of the screen and make a little gap between them and how can i make my profile image at the top of the screen and text below it like this image https://www.figma.com/file/BGDDg26x9Cl5AAOA2GGg52/Untitled?t=JCVgnCTjHVkRyhPX-0
i tried to style but something than the profile image and text gets hidden
import { StyleSheet, Text, View, Image } from 'react-native'
const App = () => {
return (
<View style={styles.container}>
<View style={styles.userSection}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={('./img.jpg')
resizeMode="contain"
overflow="hidden"
/>
</View>
<Text style={styles.text}}>Text</Text>
</View>
})
}
<View style={styles.interacte}>
<Text style={formbtn}>Button 1</Text>
<Text style={formbtn}>Button 2</Text>
</View>
</View>
)
}
export default App
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
userSection: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 80
},
imageContainer: {
width: 150,
height: 150,
borderRadius: 80,
overflow: 'hidden',
marginRight: -160,
marginTop: -600
},
image: {
width: '100%',
height: '100%',
},
text: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
marginTop: -350,
},
interacte: {
marginTop: 500,
position: absolute,
}
});

App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
const App = () => {
return (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<View style={{ marginTop: 10, marginBottom: 30 }}>
<Image
style={{ width: 100, height: 100, borderRadius: 20 }}
source={{
uri: 'https://cdn-icons-png.flaticon.com/128/919/919851.png',
}}
/>
</View>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Welcome to world</Text>
<View style={{ marginTop: 300 }}>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing In
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing Up
</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default App;
output
Hope this will help you!!🐼

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>
);
};

Camera with a transparent View Scanner

Edit 1 :
please how can i masks the spaces between the card on camera ?
The overlay mask on left side of the card should be in light grey color.
The code down below is a simplified version of the snapshot.
<Camera
ref={this.camera}
style={styles.camera}
flashMode={this.state.flashMode}
{...{type, onCameraReady, ratio}}
>
<SafeAreaView style={[styles.cameraSafeArea]} top>
<View style={[styles.header, styles.maskFrame]}>
</View>
<View style={[{flex: 40}, styles.maskFrame]} ></View>
<View style={[styles.grid]}>
</View>
<View style={[{flex: 32}, styles.maskFrame]} ></View>
<View style={[styles.footer, styles.maskFrame]}>
<IconButton name="cross" onPress={goBack} />
<TouchableOpacity onPress={notImplementedYet}>
<View style={styles.snapButton}>
<View style={[styles.innerSnapButton, { backgroundColor: theme.palette.primary }]}>
<Icon color="white" name="camera" />
</View>
</View>
</TouchableOpacity>
<IconButton name="flash" onPress={toggleFlash} />
</View>
</SafeAreaView>
</Camera>
My Css :
camera: {
flex: 1
},
cameraSafeArea: {
flex: 1,
justifyContent: 'flex-start',
backgroundColor: StyleGuide.palette.transparent
},
header: {
flexDirection: "row",
justifyContent: "space-between",
padding: StyleGuide.spacing.small,
},
footer: {
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
padding: StyleGuide.spacing.small
},
grid: {
alignItems: 'center',
justifyContent: 'space-around',
top: 0,
left: 0,
borderColor: StyleGuide.palette.white,
borderWidth: 4,
marginLeft: StyleGuide.spacing.small,
width: width - (StyleGuide.spacing.small * 2),
height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
borderRadius: 5,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6) !important',
},
maskCenter: { flexDirection: 'row' },
Result Of This Code :
I want to mask space between the whiteLine, for example in this photo (RightSide)
Any idea how to get this done ?

you can try something like this:
<View style={[{flex: 40}, styles.maskFrame]} ></View>
<View style={{ flexDirection: 'row', width: '100%' }>
<View style={styles.marginViewStyle}></View>
<View style={[styles.grid]}></View>
<View style={styles.marginViewStyle}></View>
</View>
<View style={[{flex: 32}, styles.maskFrame]} ></View>
CSS:
marginViewStyle: {
backgroundColor: 'rgba(1,1,1,0.6)',
height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
width: '5%',
},
grid: {
alignItems: 'center',
// justifyContent: 'space-around',
top: 0,
left: 0,
borderColor: StyleGuide.palette.white,
borderWidth: 4,
// marginLeft: StyleGuide.spacing.small,
width: '90%',
height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
borderRadius: 5,
},

React Native Scroll View with flex

I'm trying to create a modal, which has 2 parts: ScrollView and TouchableOpacity.
So i used react-native-modal and my app.js:
import React, { Component } from "react";
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from "react-native";
import Modal from "react-native-modal";
export default class Example extends Component {
state = {
isModalVisible: false
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => this.setState({ isModalVisible: true })}
>
<View style={styles.button}>
<Text>Open It!</Text>
</View>
</TouchableOpacity>
<Modal
isVisible={this.state.isModalVisible}
onBackButtonPress={() => this.setState({ isModalVisible: false })}
>
<View style={styles.modalContent}>
<View style={{ flex: 9 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 3, backgroundColor: "red" }}>
<Text>A</Text>
</View>
<View style={{ flex: 2, backgroundColor: "yellow" }}>
<Text>B</Text>
</View>
<View style={{ flex: 1, backgroundColor: "green" }}>
<Text>C</Text>
</View>
<View style={{ flex: 1, backgroundColor: "blue" }}>
<Text>D</Text>
</View>
<View style={{ flex: 1, backgroundColor: "cyan" }}>
<Text>E</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
</ScrollView>
</View>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.setState({ isModalVisible: false })}
>
<Text>Add Package</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
button: {
backgroundColor: "lightblue",
padding: 12,
margin: 16,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
},
modalContent: {
flex: 1,
backgroundColor: "white",
padding: 22,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
}
});
But now it's unscrollable! I tried to remove the flexGrow: 1 but then the child's flex: x lose its effect!
Please consider that I DON'T WANT to use height and width!
Any idea?
Thanks in advance!