I want to send <Text> World </Text> end of the screen.
This is my code :
<Text style={{position: 'relative}}>
<Text>Hello</Text> <Text style={{position: 'absolute', right:0}>World</Text>
</Text>
I guess right: 0 sends 'world' end of the in this text <Text style={{position: 'absolute', right:0}>World</Text>. How do I send child <Text> end of parent <Text> ?
Edited :
<TouchableOpacity>
<Text>
<Text>Hello</Text> <Text>World</Text>
</Text>
</TouchableOpacity>
Try this:
<View style={{ flex: 1, flexDirection: 'row',justifyContent: 'space-between' }}>
<Text>Hello</Text>
<Text>World</Text>
</View>
EDIT
This should work, you don't need a parent <Text>. This TouchableOpacity will act if you click both text's
<TouchableOpacity>
<View style={{ flex: 1, flexDirection: 'row',justifyContent: 'space-between' }}>
<Text>Hello</Text>
<Text>World</Text>
</View>
</TouchableOpacity>
Related
I am trying to include a clickable email within a body of text and I'm finding that when I wrap <Text> with <Pressable> the alignment of the link is higher than the rest of the sentence. Why is this and how can I fix this?
<View style={{padding: 10}}>
<Text>
This is the body of my text
<Pressable onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue}}> info#company.com</Text>
</Pressable>
</Text>
</View>
Result:
<View style={{padding: 10}}>
<Text style={{ alignVertical: 'center' }}>
This is the body of my text
<Pressable style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue}}> info#company.com</Text>
</Pressable>
</Text>
</View>
Keep the main Text tag separate. Text doesn't contain any other tags in it. so your code will be like as below:
<View style={{padding: 10, flexDirection:"row"}}> // Add flexDirection:"row"
<Text>This is the body of my text </Text>
<Pressable onPress={() => Linking.openURL('info#company.com')}>
<Text style={{color: 'blue'}}> info#company.com</Text>
</Pressable>
</View>
I hope this will work for you. Let me know if you have any other questions.
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>
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 }}>
I am trying to create a day-view with times on the left side, and a top header of people. Currently I can get the left OR the top header to stick, but not both.
How do you get 2 sticky headers?
My render looks like this:
<ScrollView style={{height: 600}}>
<ScrollView horizontal={true}>
<View style={styles.column}>
<View style={{ flex: 1, flexDirection: 'row', width}}>
{header}
</View>
<View style={styles.row}>
<View style={[styles.container, { width, marginLeft: 40 }]}>
{this.generateRows()}
</View>
</View>
</View>
</ScrollView>
<View style={{backgroundColor: 'white', position: 'absolute', top: 0, bottom: 0, left: 0, }}>
<View style={{ flex: 1, flexDirection: 'row'}}>
<View style={styles.row}>
<Text></Text>
</View>
</View>
<View style={{height: 1000, width: 40 }}>
{this.generateRowLabels()}
</View>
</View>
</ScrollView>
Can you try changing the top-level ScrollView to View/FlexBox with flexDirection as 'column'? This will cause the inner ScrollViews to fit into the window size.