View to fit the screen in React Native - css

Hello there guys
i have a problem with CSS in react native, i want to fit all my components in the screen without ScrollView but i cant seem to figure out what is my problem(i tried to change values for margins or paddings but it will look different in every device.)
As you can see at the attached image:
As you can see the graph below is not in the screen, i need to scroll view to the graph(which i dont want)
here is the code + css : (I dropped some lines to shorten the code(Like the carousel components and etc)
<View style={{ backgroundColor: "#fff" , flex: 1 }}>
<LinearGradient
colors={["#4c669f", "#3b5998", "#192f6a"]}
start={[0, 0]}
end={[1, 0]}
>
<View style={{ marginHorizontal: 20, paddingVertical: 48 }}>
<View style={styles.imageContainer}>
<View>
<View style={styles.check}>
<Ionicons name="md-checkmark" size={20} color={colors.pink} />
</View>
<Image
source={require("../assets/profile-pic.jpeg")}
style={{
width: 100,
height: 100,
borderRadius: 32,
}}
/>
</View>
</View>
<View style={[styles.center, { marginVertical: 12 }]}>
<Text style={styles.title}>
{currentUser.name + " " + currentUser.lastName}
</Text>
<Text style={[styles.subTitle, { marginTop: 8 }]}>
{businessDetails.bussinesName}
</Text>
</View>
</View>
</LinearGradient>
<View style={styles.container}>
<View style={styles.statContainer}>
<Text style={styles.statNumber}>1,700₪</Text>
<Text style={styles.stat}>הכנסה חודשית תופיע כאן</Text>
</View>
</View>
<View style={styles.center}>
<Text style={styles.textGraphTitle}>Graphs Analysis:</Text>
</View>
<View>
</View>
</View>
);
CSS:
center: {
alignItems: "center",
justifyContent: "center",
},
imageContainer: {
alignItems: "center",
justifyContent: "center",
marginTop: 1,
shadowColor: colors.darkBg,
shadowOffset: { height: 3, width: 1 },
shadowOpacity: 0.5,
},
container: {
paddingVertical: 24,
paddingHorizontal: 32,
marginBottom: 8,
backgroundColor: colors.lightBg,
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 16,
borderRadius: 16,
marginTop: -48,
},
statContainer: {
alignItems: "center",
justifyContent: "center",
flex: 1,
},

You are asking responsive app design. Basically, you can use for width and height percentages or dimension.
import { Dimensions} from 'react-native'
const {width, height} = Dimensions.get('window')
One more approach is to use react-native-screens library

Related

react-native: list alignment

**How can i make this list smooth? Now its crooked,( 2 and 3 column)
Im trying to do it with marginLeft and marginRight but result is the same. Maybe i shuold use 1 more flatlist i dont know. pls help who knows
**
<FlatList
data={currencyList}
renderItem={({item, index}) => {
let priceColor = item.change24h == 0
? "#757575"
: item.change24h > 0
? "#4BEE70" : "#D84035"
return (
<View style={{
flex: 1,
flexDirection: 'row',
marginBottom: 10,
borderBottomColor: "black",
borderBottomWidth: 1,
alignItems: 'center',
justifyContent: 'space-between'
}}>
{/*Symbol*/}
<View
style={{
marginRight: 20,
}}
>
<Text
style={{
fontSize: 18,
flex: 1,
textAlign: 'left'
}}>
{item.symbol}
</Text>
</View>
{/*Ask*/}
<View style={{
marginRight: 20,
marginLeft: 20,
width: 80,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text style={{
flex: 1,
fontSize: 18,
textAlign: 'left',
alignItems: 'center',
justifyContent: 'center'
}}>
{item.ask}
</Text>
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center'
}}>
<Text
style={{
marginRight: 20,
color: priceColor,
fontSize: 18,
alignItems: 'center',
justifyContent: 'flex-start'
}}
>
{item.change24h}
</Text>
</View>
<View style={{
flexDirection: 'row',
}}>
<Text style={{
textAlign: 'right'
}}>
{item.change24h.toFixed(2)}
</Text>
{
item.change24h != 0 &&
<Image
source={icons.upArrow}
style={{
width: 20,
height: 20,
tintColor: priceColor,
transform: item.change24h > 0 ? [{rotate: "45deg"}] : [{rotate: "125deg"}]
}}
/>
[image of flatlist][1]https://i.stack.imgur.com/8OjNA.png
[1]: https://i.stack.imgur.com/8OjNA.png

Align vertically to bottom

I've created a card containing some text and an icon.
I would like to align that icon to bottom. Here is my code:
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
...
</View>
<View
style={{
marginLeft: 10,
height: '100%',
// justifyContent: 'flex-end',
// alignContent: 'flex-end',
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
alignContent: 'center',
}}>
<MyIcon color="gray" />
</View>
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg ...>
...
</Svg>
</View>
);
}
A working snack is here.
The circle containing the icon should be at the bottom, I don't need absolute because I think.
I try flex-end but seems not to work.
As is:
What I want (the cyan circle is the icon):
import * as React from 'react';
import { Text, View } from 'react-native';
import Svg, { Path } from 'react-native-svg';
export default function App() {
return (
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 15,
}}>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row' }}>
<Text
numberOfLines={1}
style={{
fontSize: 12,
color: 'black',
fontWeight: '600',
paddingRight: 5,
}}>
Park
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'black', fontWeight: '400' }}>
{`- Something`}
</Text>
</View>
<Text
numberOfLines={1}
style={{
fontSize: 16,
color: 'black',
fontWeight: '600',
paddingVertical: 3,
}}>
A place
</Text>
<Text
numberOfLines={1}
style={{ fontSize: 12, color: 'gray', fontWeight: '400' }}>
10:00 - 17:00
</Text>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'flex-end',
}}>
<MyIcon color="gray" />
</View>
</View>
);
}
function MyIcon({ color }) {
return (
<View
style={{
borderRadius: 15,
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue',
}}>
<Svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<Path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.7489 3.91654C11.0386 3.37708 10.8414 2.41269 11.2425 1.64836L9.86861 0.604841C9.4288 0.270796 8.80147 0.356536 8.46742 0.796346L6.29 3.66319L6.78186 4.03677L7.1004 4.27871L6.61652 4.91578L6.29799 4.67385L5.80612 4.30027L0.604492 11.1488C0.270448 11.5887 0.356187 12.216 0.795997 12.55L2.15874 13.5851C2.78224 12.9278 3.81383 12.8315 4.55197 13.3921C5.29012 13.9528 5.47419 14.9724 5.0083 15.7494L6.37042 16.7839C6.81023 17.118 7.43756 17.0322 7.77161 16.5924L12.9732 9.74384L12.4814 9.37026L12.1628 9.12832L12.6467 8.49125L12.9653 8.73318L13.4571 9.10676L15.6345 6.23991C15.9686 5.80011 15.8828 5.17277 15.443 4.83873L14.0697 3.79568C13.4411 4.38723 12.4591 4.45599 11.7489 3.91654ZM8.18717 5.10414L7.86864 4.8622L7.38476 5.49928L7.7033 5.74121L8.68702 6.48837L9.00556 6.73031L9.48944 6.09323L9.1709 5.85129L8.18717 5.10414ZM10.5762 6.91866L10.2577 6.67672L9.7738 7.3138L10.0923 7.55574L11.0761 8.30289L11.3946 8.54483L11.8785 7.90775L11.5599 7.66582L10.5762 6.91866Z"
fill={color}
/>
</Svg>
</View>
);
}
Here is the snack you can check
Instead of
alignContent: 'flex-end'
You should use
alignItems: 'flex-end'

React Native: Button at the right end of of Text

React Native learner here.
I am trying to show the suggestions as below:
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
}}
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<View>
<Text style={styles.itemText}>{item.title}</Text>
<Button
title={'Click'}
style={{
backgroundColor: 'green',
right: 0,
paddingRight: 0,
marginRight: 0,
}}></Button>
</View>
</TouchableOpacity>
...
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
alignItems: 'flex-start',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
Output looks like below:
I want my suggestion's Text in the left side, while Click button always at the right side fixed with fixed length.
Text and Button region shouldn't overlap each other.
Any help or guidance about how to do it. Highly appreciated !!
P.S.: With style={{flexDirection: 'row'}} in <View> my Buttons in Suggestion box get pushed to right side and not visible as below:
I expect something like this:
You have to use flexDirection:'row' for inner View which contain the Text and the Button
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}}
onPress={() => {}}>
<Text style={{ maxWidth: '90%' }}>
{item.title}
</Text>
<View>
<Text style={{ backgroundColor: 'blue', alignItems: 'center' }}>
Click
</Text>
</View>
</TouchableOpacity>
Don't forget to look at : https://www.npmjs.com/package/react-native-read-more-text
this will help you get through it.

Height of View in react native

Is it possible to make the <View /> having the same height? I am fetching a data from server side and some content are short and some are long. So when I display them in a box form, the height of the box aren't same. If I fix the height or minimum height the long text will exceed the height of the box.
EDIT : Sample code
DisplayEguides(){
var winsWidth = Dimensions.get('window').width;
if(this.state.eguides != null){
var eguides = this.state.eguides.map((data, i)=>(
<View key={i} style={[ { width: (60/100)*winsWidth, paddingHorizontal: 5 } ]}>
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15 }}>
<View style={{ alignItems: 'center', overflow: 'hidden', position: 'relative' }}>
<Text style={{ fontWeight: 'bold', textAlign: 'center', marginBottom: 15 }}>{ data.title }</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ color: Color.default, fontWeight: 'bold' }}>Download</Text>
<AntDesign name="download" size={16} color={Color.default} style={{ paddingLeft: 10, fontWeight: 'bold' }} />
</View>
</View>
</TouchableOpacity>
</View>
))
return (
<View style={{ paddingHorizontal: 15 }}>
<AppText type="bold" style={{ fontSize: 18, marginBottom: 15 }}>E-Guides</AppText>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>{ eguides }</ScrollView>
</View>
);
}
}
Seems like Flexbox in react native is doing the job but need to place at the right element. Setting the view to flex: 1 will auto adjust all content inside it to have the same height. In my case, I have to set flex: 1 at TouchableOpacity since my box style is in this element.
<TouchableOpacity
onPress={()=>this.OpenUrl(data.url)}
style={{ backgroundColor: '#ffffff', borderBottomWidth: 1, borderColor: '#efefef', elevation: 1, shadowOpacity: 0.8, marginBottom: 15, padding: 15, borderRadius: 15, flex: 1 }}>
{ /* The rest of code goes here */ }
</TouchableOpacity>

How can I mix fixed and dynamic size elements in a flexbox container?

I'm trying to create a layout that utilizes flexbox' automatic sizing but also contains fixed-size items:
<View style={{ height: 70, alignItems: "center" }}>
<Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
<Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
<Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>
I want the image to be centered in the UI and have the text views equally take the remaining width. The actual result is that one of the text views is larger than the other as if the rendering doesn't take the width of the image view into account.
Finally found the correct way of doing this. To have fixed size items in a flex layout one shouldn't use width/height but flex: 0 and flexBasis. This approach initially didn't work for me because a component wrapping my component wasn't sized correctly and messed with the flex rendering. flexBasis seems to be density-independent pixels when it is set to an absolute number.
Proof of concept on expo.io
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
view: {
flex: 0,
flexBasis: 50,
height: 50,
backgroundColor: "red",
},
text1: {
flex: 1,
textAlign: "right",
paddingRight: 10,
},
text2: {
flex: 1,
textAlign: "left",
paddingLeft: 10,
}
});

Resources