How can I, in React Native, make a simple ScrollView with black background in which I have a white box with 20px margin around the box?
I have tried
<ScrollView style={{ backgroundColor: '#000', flex: 1 }}>
<View style={{ flex: 1, margin: 20, backgroundColor: '#fff' }}
<Text>Text</Text>
</View>
</ScrollView>
but it doesn't fill up the full width and height of the screen.
You should use padding in ScrollView like this:
<ScrollView style={{ backgroundColor: '#000', flex: 1, padding: 20}}>
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text>Text</Text>
</View>
</ScrollView>
Related
I would like to add a band of grey in the midddle of my white background. Here is the issue : I can't write anything inside of it. Here is my code : container: { flex: 1, justifyContent: "center", marginTop: 12, flexDirection: "column", }, upperContainer: { flex: 1, backgroundColor: "#fff", }, lowerContainer: { flex: 1, top: 1400, backgroundColor: "#F7F7F7", }
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
<View style={styles.container}>
<View style={styles.upperContainer}>
...
<View style={styles.lowerContainer}>
...
I'm not sure what you're going for with the ScrollView, but here's one way to do it on a static background:
<View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center' }}>
<View style={{ backgroundColor: '#bbb', width: '100%', paddingVertical: 12 }}>
<Text style={{ textAlign: 'center' }}>
Gray Stripe Text
</Text>
</View>
</View >
Keys are:
flex: 1 and justifyContent: 'center' in outer View
nesting elements so they are contained
You could probably also do the gray background without the inner View, by adding background color straight to the Text.
See the following snack
I need to adapt the height of the ScrollView to its children. It seems that ScrollView is using { flex: 1 } by default (not sure). Any ideas how to make it possible?
<View style={{ flex: 1 }}>
<ScrollView horizontal style={{ backgroundColor: 'red' }}>
<View
style={{ width: 60, height: 30, marginLeft: 5, backgroundColor: 'lime' }}
/>
</ScrollView>
<View style={{ flex: 1, backgroundColor: 'yellow' }} />
</View>
Thank you.
Note: Is it possible to do it without using { height: 30 } ?
Wrapping the ScrollView inside a View does the trick.
<View style={{ flex: 1 }}>
<View>
<ScrollView horizontal style={{ backgroundColor:"red" }}>
<View style={{ width: 60, height: 30, marginLeft: 5, backgroundColor: "lime" }} />
</ScrollView>
</View>
<View style={{ flex: 1, backgroundColor:"yellow" }} />
</View>
i am new to react native and i am trying to make a chat app layout.
As you can see in screenshot that i have attached, i want text box to take as much space as the text in it. For example, if i send 'Hi', it should only be stretched as much space 'Hi' needs.
If i send a long text, then it should stretch and take as much space as that text is. Like it happens in almost all texting apps.
The text box code is:
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{flex: 3}}>
<Text style={styles.message}>{item.message}</Text>
</View>
<View style={{flex: 1}}>
<Image
source={require('../assets/images/check.png')}
style={styles.image}
/>
<Text style={{textAlign: 'right', color: 'white'}}>
{msToTime(item.timestamp)}
</Text>
</View>
</View>
</TouchableOpacity>
Stylesheet
containerSent: {
flex: 1,
maxWidth: '70%',
// minWidth: '30%',
marginTop: 20,
paddingTop: 20,
paddingHorizontal: 10,
paddingBottom: 10,
borderWidth: 1,
backgroundColor: '#6F2232',
borderRadius: 20,
alignSelf: 'flex-end',
flexDirection: 'row',
justifyContent: 'space-between',
// justifyContent: 'flex-end',
},
message: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
textAlign: 'left',
alignSelf: 'stretch',
},
image: {
width: 15,
height: 15,
marginLeft: 20,
marginBottom: 5,
alignSelf: 'flex-end',
},
How I have implemented this is that I removed flex: 3 and flex: 1 from both the elements so that they don't expand to take the max space, and I added flexShrink: 1 to the text, so that it always shrinks keeping the right element intact.
Snack link
Set View style to flex: 0 so it‘s just taken as Maus h space as necessary.
<TouchableOpacity>
<View style={styles.containerSent}>
<View style={{ flex: 0 }}>
<Text style={styles.message}>{'q.a'}</Text>
</View>
<View style={{ flex: 0, paddingLeft: 10 }}>
<Text style={styles.message}>{'eeeee.message'}</Text>
</View>
</View>
</TouchableOpacity>
Take a look at my sample
I need to display text in vertical position. the text will be dynamic so it can be short or long. i've added the screenshot of what i want. can anybody share the code for this type of ui. thanks in advance.
Like this
see this, this is what i got
<View>
<View style={{}}>
<View
style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
>
<Text
style={{
textAlign: "center",
fontSize: 20,
alignSelf: "center",
transform: [{ rotate: "90deg" }],
color: "white",
fontWeight: "bold",
}}
>
Short
</Text>
</View>
</View>
<View style={{}}>
<View
style={{ marginTop: 30, flexDirection: "row", justifyContent: "center" }}
>
<Text
style={{
textAlign: "center",
fontSize: 20,
alignSelf: "center",
transform: [{ rotate: "90deg" }],
color: "white",
fontWeight: "bold",
}}
>
Long Text
</Text>
</View>
</View>
</View>;
You're going to be in trouble if you try to apply the transformations one by one in all <Text />. Instead try to apply the transformations in a parent <View /> which gives you more control of what is going on.
const App = () => {
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const height = 80;
return (
<View
style={{
transform: [
{rotate: '-90deg'}, // negative degrees is important for this calculations and have the text face the content as your desired result picture shows
{translateX: -(screenHeight / 2)}, // rotation is being applied in the center so it's safe to move it half screen
{translateX: height / 2}, // correct the x translation with half of our component height so it stays on screen
{translateY: -screenWidth}, // rotation is being applied in the center so it's safe to move it full screen width
{translateY: height / 2}, // correct the y translation with half of our component height so it stays on screen
],
width: screenHeight, // swap screen width with screen height so the background covers the entirety of the screen
height, // fixed height is important to apply corrections on transform you could also use a ref and get this size on runtime
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
}}>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Short
</Text>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Long Text
</Text>
<Text
style={{
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
}}>
Very Long Long Text
</Text>
</View>
);
};
You can check the result here.
I have a View-Element that contains an image, which works as a background-image for the View-Element. The background-image is absolute positioned with top, left, right and bottom set to 0 but it is still higher then it's parent (you can see it on the red border in the image).
Screenshot from iOS Simulator
Does anyone know why?
<View style={styles.headerContainer}>
<Image source={Images.headerBg} style={styles.headerBackgroundImage} resizeMode="cover" />
<View style={styles.headerRow}>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.magicHeartButton}>
<Icon
name="heart"
size={12}
color="red"
style={styles.magicHeartButtonIcon}
/>
<Text style={styles.magicHeartButtonText}>247</Text>
</TouchableOpacity>
</View>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.tonightButton}>
<Text style={styles.tonightButtonText}>right column</Text>
</TouchableOpacity>
</View>
</View>
</View>
The Stylesheet:
headerContainer: {
backgroundColor: '#ffd700',
height: 40,
position: 'relative',
borderWidth: 1,
borderColor: 'red',
},
headerRow: {
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
headerColumn: {
padding: 10,
},
headerBackgroundImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
I did background image in following way. Instead of wrapping in <View>, I wrapped everything in <Image>
Example:
<Image source = {require('./back.jpg')} style={styles.container}>
<View>
</View>
</Image>
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0)',
height :null,
width: null
},