hi there i have a small problem i dont know why my text dont want to be wrapped but the problem the same code work for me in other screen but in the screen below dont want to work ?
here is some screenshot from my phone
image 1
image 2
and this is my code
import React from 'react';
import { View, Text } from 'react-native';
const Part = (props) => (
<View style={{ flexDirection: 'row', marginHorizontal: 20, marginVertical: 10 }}>
<Text style={{ marginHorizontal: 10 }}>-</Text>
<View>
<Text style={{ flexWrap: 'wrap' }}>{props.name}</Text>
{props.adress !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Adresse : </Text>
<View style={{ flexDirection: 'row' }} >
<Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
</View>
</View> : null }
{props.tel !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Tél : </Text>
<View>
{props.tel.map((tel) => (
<Text>{tel}</Text>
)
) }
</View>
</View> : null }
{props.fax !== null ? <View style={{ flexDirection: 'row' }}>
<Text>Fax : </Text>
<View>
{props.fax.map((fax) => (<Text>{fax}</Text>))}
</View>
</View> : null}
</View>
</View>
);
export default Part;
give width in percentage Like
<View style={{ flexDirection: 'row'' }}>
<Text>Adresse : </Text>
<View style={{ flexDirection: 'row',width:'50% }} >
<Text style={{ flexWrap: 'wrap' }}>{props.adress}</Text>
</View>
Related
I am trying to write a custom component for this "table" type Figma design doc. Should be an icon on the left that takes .25 of the row and .75 of the row is text.
And I should be able to duplicate that right under it.
Below is the code that I've tried, but the image and text actually overflow the page, and I suspect I'm using too many "flex"'s incorrectly or there might be a much simpler way to do. Any ideas? Thanks!
export function TwoColumnIconLeft (props){
const title = props.title;
const subtitle = props.subtitle;
const body = props.body;
return (
<View
style={{
flex: 1,
flexDirection: "column",
padding: 20
}}>
<View
style={{
flex: .5,
flexDirection: "row",
}}
>
<Image style={{flex: .25}} source={require("./../Assets/watermelon.png")}/>
{/* <Text style={[{ backgroundColor: "red", flex: .25 }, styles.subTitle]}>{subtitle}</Text> */}
<Text style={[{ backgroundColor: "blue", flex: .75}, styles.title]}>{title}</Text>
</View>
<View
style={{
flex: .5,
flexDirection: "row",
}}
>
<Text style={[{ backgroundColor: "red", flex: .25 }, styles.subTitle]}>{subtitle}</Text>
<Text style={[{ backgroundColor: "blue", flex: .75}, styles.title]}>{title}</Text>
</View>
</View>
);
};[enter image description here][1]
This should do the trick for you:
<View style={{flex:1, flexDirection: 'row'}}>
<View style={{flex: .25, flexDirection: 'column'}} >
<Image source={require("./../Assets/watermelon.png")}/>
<Text style={styles.subTitle}>{subtitle}</Text>
</View>
<View style={{flex:0.75, flexDirection: 'column'}}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.title}>{title}</Text>
</View>
Hope this helps.
I'm trying to put the name's on the left and the rank on the right. I tryed the flexDirection row with a space between or space evenly but it still doesn't work.
Do you have any solution for that ?
Also my function :
renderRanking = () => {
return this.state.ranking.map((element) => {
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-’‘’',
}}>
<View style={{flex: 1}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>
</View>
);
});
};
And my render
render() {
return (
<SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
<View style={{flex: 1, backgroundColor: 'black'}}>
<ScrollView>
<View
style={{
flex: 1,
}}>
<Text>{this.OpenDecibels()}</Text>
</View>
<View style={{paddingBottom: 30}}>
<PageControlView defaultPage={1}>
<View>{this.renderRanking()}</View>
</PageControlView>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
}
}
Try this way
<View
style={{
flexDirection: 'row',
justifyContent: 'space-’‘’',
}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>
You should try below snippet in your renderRanking function.
renderRanking = () => {
return this.state.ranking.map((element) => {
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontSize: 20, color: 'white'}}>{element.club}</Text>
<Text style={{fontSize: 20, color: 'white'}}>
{element.moyenne}
</Text>
</View>
);
});
};
Also change
<PageControlView defaultPage={1}>
<View>{this.renderRanking()}</View>
</PageControlView>
To
<PageControlView defaultPage={1}>{this.renderRanking()}</PageControlView>
I've a simple React Native component:
export default class TestComponent extends React.Component {
render() {
return (
<View style={{flex:1}}>
<Text>Test</Text>
</View>
);
}
}
It is used by this App:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ flex: 0, backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ flex: 0, backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 10,
},
});
I expect the TestComponent and the yellow view to be displayed but using only required space and the blue view to fill up the remaining content.
The yellow and blue area is working as expected, but the TestComponent is not displayed. Why?
See this demo: https://snack.expo.io/#dennismadsen/great-fudge
just don't use flex:0
use flex:1 in component that you want to fill the remain screen
the 2 others don't write any flex
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 10,
},
});
Just remove flex: 0 from your JSX and it will work.
render() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
}
Reason:
When you want only 1 component to cover the rest area then you just need to give the element flex: 1 and leave others as is, so that they can only take the required space. When you explicitly assign flex: 0 then it won't even take the required space.
FYI, I already tried this in the demo link you have shared.
EDITED:
export default class TestComponent extends React.Component {
render() {
return (
<Text>Test</Text>
);
}
}
OR
export default class TestComponent extends React.Component {
render() {
return (
<View>
<Text>Test</Text>
</View>
);
}
}
You need to just remove flex:1 from <Testcomponent/> then you test component take size according to its content.
Please check this demo link
https://snack.expo.io/#vishal7008/new-component
Working demo image
The reason why 'TestComponent' is not visible is because the parent flex value is zero. The flex will be covered together in yellow with zero.
You have to set flex values to see all colors and letters.
red: 1 yellow : 1 blue : 8 === 1:1:8 === 0.1 : 0.1 : 0.8
return (
<View style={styles.container}>
<View style={{ flex: 1, backgroundColor: 'red' }}>
<TestComponent />
</View>
<View style={{ flex: 1, backgroundColor: 'yellow' }}>
<Text>2</Text>
</View>
<View style={{ flex: 8, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
You can use two things if you want to make the text equal to the height of the second view. You can use flexBasis or height
'flexBasis' and 'height' do the same thing.
OR
You can also use flexShrink.
// use `flexBasis` or `height`
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red',flexBasis: 20 }}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green',height: 20 }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
use `flexShrink`.
return (
<View style={styles.container}>
<View style={{ backgroundColor: 'red',flexBasis: 20 }}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green',flexShrink:0 }}>
<Text>2</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
);
Remove Flex value
<View style={styles.container}>
<View style={{ backgroundColor: 'red'}}>
<TestComponent />
</View>
<View style={{backgroundColor: 'green'}}>
<Text>222222222222222222</Text>
<Text>111111111111111111</Text>
<Text>535555555555</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue' }}>
<Text>3</Text>
</View>
</View>
....
<View>
<Text>Test</Text>
<Text>Test</Text>
<Text>Test</Text>
</View>
See Screen
I want to divide the whole screen into 4 equal parts each having a clickable action and onclick a prompt should appear with a textbox and an okay button on pressing it I need to render a webview
If you are doing this in react-native then use below code. This will divide screens in four parts and with TouchableOpacity you can use click events reflection otherwise you can use simple View.
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'red' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'green' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'blue' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
<TouchableOpacity
style={{ flex: 1, backgroundColor: 'yellow' }}
onPress={() => { }} // Action
>
</TouchableOpacity>
</View>
</View>
Yes, you can use common styling and components but for now I use separate So, you can easily edit and test.
You can use the vw(viewport width) and vh (viewport height), and assign to all of your items
width: "50vw",
height: "50vh"
<View style={{flex: 1}}>
<View style={{flex: 1}}> </View>
<View style={{flex: 1}}> </View>
</View>
I searched how to set footer using React Native.
and I found a solution
https://stackoverflow.com/a/31249011/8226957
I followed and put style={{flex: 1}} to root View, but it does not work.
<View style={{flex: 1}}>
<ScrollView>
<FlatList
data={this.state.datas}
renderItem={({item}) =>
<TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}>
<Text style={styles.item}>
{item.value}
</Text>
</TouchableOpacity>
}
/>
</ScrollView>
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TouchableOpacity onPress={this._onAddButton}>
<View style={{
height: 50,
backgroundColor: 'steelblue',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{textAlign: 'auto'}}>ADD</Text>
</View>
</TouchableOpacity>
</View>
</View>
when I follow that, I see disappeared List.
Try to add justifyContent : 'space-between' and add flexDirection: 'column' that should be fix your problem
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
Try to wrap the <ScrollView> in a <View style={{ flex: 1 }}>
If that does not work, try to set a fixed height too your footer: <View style={{ height: 90 }}>