Defining margin-top in react in VH - javascript

I want to define the height of this container with VH but when i do i get errors.
return (
<Container style={{ marginTop: 80vh }}>
<Container maxWidth="xs" style={{ position: 'relative' }}>
<Paper
style={{
padding: 24,
paddingBottom: 10,
backgroundColor: '#151A1F',
borderRadius: 6,
}}
>

Put it in a string:
<Container style={{ marginTop: "80vh" }}>

Related

Using % for width not working React Native

I am coding a project using expo react native and I made a horizontal scrollview for images. The images are styled correctly when pixels are used: <Image code... style={{width: 350}}/> However if I try to change the 350 to 35% the image disappears from the screen. I have tried several different ways to fix this problem, like adding a 100% width viewport for the parent class (like seen below), however it still is not working.
Here is the file of code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ScrollView, Modal, Pressable } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { useState } from 'react';
export default function ImpEvents() {
const slides = ['https://patch.com/img/cdn20/users/22844250/20200421/014148/styles/patch_image/public/livingston-highschool-schoolpr___21133742706.jpg', 'https://patch.com/img/cdn/users/22844250/2015/05/raw/20150555523bf088bd6.jpg', 'https://patch.com/img/cdn/users/22821264/2014/08/raw/5400e8ea02f3c.png']
const [modalVisible1, setModalVisible1] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
return (
<View style={{width: '100%'}}>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible1}
onRequestClose={() => {
setModalVisible1(!modalVisible1);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>1</Text>
</Modal>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>2</Text>
</Modal>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>3</Text>
</Modal>
<Text style={{ left: 40, fontFamily: 'OpenSans_700Bold', marginTop: '70%', fontSize: 25, color: "#3D3D3D" }}>Important Information</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{ paddingTop: 7, paddingLeft: 40 }} snapToInterval={370} decelerationRate={0}>
<Pressable onPress={() => setModalVisible1(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[0]
}}
style={{ width: "35%", height: 175, borderRadius: 10 }}
/>
</Pressable>
<Pressable onPress={() => setModalVisible2(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[1]
}}
style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<Pressable onPress={() => setModalVisible3(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[2]
}}
style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<View
style={{ width: 50, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</ScrollView >
</View>
<View/>
)
}
So the image at index 0 is not being displayed but the images at indices 1 and 2 are being displayed when I don't use percentages.
Thanks for the help.
If you would like to use % you need to give a parent component width. Or there is another solution which you can get the width of the device in react native. You can achieve it using Dimension as below:
import { Dimensions } from 'react-native';
const ScreenWidth = Dimensions.get('window').width;
So in order to give 90% width of device you can use it like this width: ScreenWidth * 0.9.
It's Happening because Its parent component <Pressable> does not have the width style mentioned if you want to provide dynamic height or width in percentage then you must provide height and width to its parent component.
just give width: "100%" to its parent component and then check and if that does not work check the parent component of the parent component and backtrace it.

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?

React Native ScrollView Horizontal

I'm making a system in which there is one horizontal ScrollView. But I don't know why, this scrollView doesn't work.
There is my code:
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
display: "flex",
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
display: "flex",
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
I tried to remove and change some things but nothing change.
Could someone explain to me where the problem is?
Thanks you in advance I continue by my side!
You need to add a flex: 1 to the parent view of your elements. The following adjustment fixes your issue.
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
flex: 1,
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>

zIndex doesn't work in component

I have a blue header which i want to take part of that on another view with an animate event. but before i execute animate function i set the zIndexes manually and knew it doesn't work at all!! means nothing will change when i give 1 or 100 or other value to zIndex property of my components :(
<View style={{ flex: 1 }}>
<Animated.View style={{
position: 'absolute',
top: 0,
left: 0, right: 0,
backgroundColor: 'lightskyblue',
height: headerHight,
zIndex: 1,//Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
alignItems: 'center',
}}>
<Animated.View style={{ position: 'absolute', top: titleTop }}>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
</Animated.View>
</Animated.View>
<ScrollView style={{ flex: 1 }}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
)}>
<Animated.View style={{
height: profileImageHight,
width: profileImageHight,
borderRadius: PROFILE_IMAGE_MAX_HIGHT / 2,
borderColor: 'white',
borderWidth: 3,
overflow: 'hidden',
marginTop: profileImageMarginTop,
zIndex:0, //Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
marginLeft: 10,
}}>
<Image source={require('./assets/avatar.jpg')} style={{ flex: 1, width: null, height: null}} />
</Animated.View>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
<View style={{ height: 1000 }}></View>
</ScrollView>
</View>
like you see above: there are two components which has zIndex. so taking one which has zIndex:1 on the other is expected but there is no change bout them in run time.
Try elevation with zIndex and absolute position.
Apply below style on component which you want to show on front layer
style={{ position: 'absolute', elevation: 100,zIndex:100, //other style }}
Let me know if still facing issue
Try using elevation, that might help you to differentiate between the views.

Adding react components to header based on the page

On all but two pages of my site I would like the header to include two buttons. How can I make the header aware of this so it includes the buttons when needed and doesn't for the other two pages. I'm using React and Gatsby.
Could I accomplish this by adding if statements to my component? If so I'm not sure how to move beyond this step.
const isHomepage = pathname == `/`
const isContact = pathname == `/contact/`
let styles = {}
if (isHomepage) {
}
} else if (isContact) {
} else {
}
This is my code for the header:
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
</h3>
</div>
</div>
</div>
)
export default Header
Use conditional rendering based on location.pathname
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
</h3>
</div>
</div>
</div>
)
export default Header

Categories