I want to achieve the following view, where i have a blue image which is added as a background sticking to the top of the container. Any idea on how this can be achieved in React Native?
P.S. I am using Native Base too in the project
import * as React from 'react';
import { View, Image, Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export default function App() {
return (
<View
style={{
flex: 1,
backgroundColor: '#ecf0f1',
}}>
<Image
resizeMode={'contain'}
source={{
uri:
'https://loremflickr.com/cache/resized/65535_51113407033_7bed78119e_z_640_360_nofilter.jpg',
}}
style={{ width: windowWidth, height: 300, position: 'absolute' }}
/>
<View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 10 }}>
<View
style={{
width: windowWidth * 0.8,
height: 350,
backgroundColor: 'white',
alignSelf: 'center',
}}
/>
</View>
</View>
);
}
Related
I've just started learning React Native.. this is what my current app looks like
this is my code so far:
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, StyleSheet, Text, Image, View, Button, TextInput } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.mainContainer}>
<View style={styles.logoContainer}>
<Image style={styles.logoImage} source={require("./assets/logo03t.png")} />
</View>
<Text style={styles.logoText}>App untuk Edy Kiatmadja ver 1.0</Text>
<TextInput style={styles.input} placeholder="Username" />
<TextInput style={styles.input} placeholder="Password" />
</View>
<StatusBar style="auto" />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'dodgerblue',
alignItems: 'center',
justifyContent: 'center',
},
logoContainer: {
padding: 20,
},
logoImage: {
resizeMode: 'contain',
height: 200,
backgroundColor: "#fff",
},
logoText: {
marginTop: 8,
fontSize: 12,
fontStyle: 'italic',
},
mainContainer: {
flex: 1,
justifyContent: 'center', // horizontal axis
alignItems: 'center', // vertical axis
},
input: {
height: 40,
margin: 10,
borderWidth: 1,
padding: 10,
width: 200,
}
});
what do I have to do to make the Image not cut-off?
Set a maximum width of current screen width in logoContainer style. You can use react-native's Dimension API to find current device width & height.
To get the device width:
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
Then use this as width of the container.
...
logoContainer: {
padding: 20,
maxWidth: windowWidth,
},
...
I have the following component where I want to change the background of the whole application to "#080f26" color. However, the background color of the right and left sides of the screen does not change.
import React from "react";
import {
Image,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
SafeAreaView,
StatusBar,
} from "react-native";
export default class CitizenRegistrationForm extends React.Component {
render() {
return (
<TouchableOpacity
onPress={() => {
Keyboard.dismiss();
}}
activeOpacity={5}
style={{
width: "100%",
height: "100%",
alignItems: "center",
backgroundColor: "#080f26",
}}
>
<SafeAreaView
style={{
width: "100%",
height: "100%",
paddingTop:
Platform.OS === "android" ? StatusBar.currentHeight * 1.5 : 0,
}}
>
<View style={styles.regForm}>
<View style={{ height: "20%", alignItems: "center" }}>
<Image
source={require("../gui_components/reportown.png")}
style={{ width: "60%", height: "100%", resizeMode: "contain" }}
/>
</View>
<Text style={styles.header}>Register</Text>
<TextInput
style={styles.textinput}
placeholder="Name"
underlineColorAndroid={"transparent"}
placeholderTextColor={"gray"}
/>
...
<TouchableOpacity style={styles.button}>
<Text style={styles.buttontext}>Register</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
regForm: {
backgroundColor: "#080f26",
},
...
});
The screen is as follows:
How can I change the background color of the entire screen?
<SafeAreaView
style={{
width: "100%",
height: "100%",
backgroundColor: "#080f26",
paddingTop:
Platform.OS === "android" ? StatusBar.currentHeight * 1.5 : 0,
}}
>
I have two background views with different colors. Both their own size.
Over these backgrounds, I need an image aligned on the left, over both other views.
how can i accomplish this?
export default class MainScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.rectangle1}>
<Image
source={require('../assets/dame.png')}
style = {styles.image}/>
</View>
<View style={styles.rectangle2}>
</View>
</View>
)
}
}
Added sample image what to accomplish:
besides the use of absolute positioning, here is another tip to achieve a similar layout on most devices is the use of Dimensions and constants for the width and height of the devices that.
based on the information provided, here is how my design will look like:
////import { Dimensions } from react-native;
const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
export default class MainScreen extends Component {
render() {
return (
<View style={{ backgroundColor: 'magenta', height: deviceHeight }}>
<View
style={{
width: deviceWidth * 0.44,
alignSelf: 'flex-start',
}}
>
<Image
source={{ uri: 'https://ui-avatars.com/api/?name=Alice' }}
style={{ width: '100%', height: '100%' }}
/>
</View>
<View
style={{
backgroundColor: 'black',
position: 'absolute',
width: deviceWidth * 0.56,
height: deviceWidth * 0.56,
alignSelf: 'flex-end',
opacity: 0.7
}}
/>
<View
style={{
backgroundColor: 'yellow',
width: deviceWidth * 0.7,
height: deviceWidth * 0.1,
position: 'absolute',
top: deviceHeight * 0.8,
alignSelf: 'center',
opacity: 0.8,
}}
/>
<View
style={{
backgroundColor: 'blue',
width: deviceWidth,
height: deviceWidth * 0.14,
position: 'absolute',
bottom: 0,
alignSelf: 'flex-end',
opacity: 0.8,
}}
/>
</View>
)
}
}
i suggest you keep experimenting to find out which method works best for your application.
I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:
Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import { Text, View, Image } from "react-native";
export default class RootComponent extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<View style={{ backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" }}>
<View>
<Image
source={require("./assets/h4.jpg")}
style={{
height: 135,
width: 155
}}
/>
</View>
<View style={{ padding: 10, width: 155 }}>
<Text>Title</Text>
<Text style={{ color: "#777", paddingTop: 5 }}>
Description of the image
</Text>
</View>
</View>
</View>
);
}
}
By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<View style={{ backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' }}>
<View style={{ height: 135, width: 155, overflow: 'hidden' }}>
<Image
source={require("./assets/h4.jpg")}
style={{
width: 155
}}
/>
</View>
<View style={{ padding: 10, width: 155 }}>
<Text>Title</Text>
<Text style={{ color: "#777", paddingTop: 5 }}>
Description of the image
</Text>
</View>
</View>
</View>
You can directly do it with borderTopLeftRadius and borderTopRightRadius in a Card.
<Card
containerStyle={styles.boxCon}
featuredTitle={title}
image={{
uri: urlToImage
}}
imageStyle={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }}
>
const styles = {
boxCon: {
margin: 15,
marginHorizontal: 10,
marginBottom: 17.5,
borderColor: '#FFFFFF',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 5,
borderRadius: 10
}
};
I am trying to display an image in RN as following:
Starting from the top, no padding
Stretching to screen's width
Keeping aspect ratio
The image size is 340x340.
Here is how it is displayed on Genymotion's Nexus 5 emulator (screen resolution 1080x1920):
And this is the code:
import React, { Component } from 'react';
import { View, Animated, Text, Dimensions } from 'react-native';
const { height } = Dimensions.get('window');
const IMAGE_HEIGHT = height * 2 / 3;
class SplashScreen extends Component {
constructor(props) {
super(props);
this.imageHeight = new Animated.Value(IMAGE_HEIGHT);
}
render() {
return (
<View style={{ backgroundColor: '#fff', flex: 1 }}>
<View style={{ flex: 2, alignItems: 'stretch', justifyContent: 'flex-start' }}>
<Animated.Image
style={{ height: this.imageHeight }}
resizeMode="contain"
source={require('./image.png')}
/>
</View>
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 22, alignSelf: 'center', padding: 15 }}>
Header
</Text>
<Text style={{ fontSize: 16, alignSelf: 'center', paddingBottom: 10 }}>
text text text text
</Text>
</View>
</View>
);
}
}
export default SplashScreen;
Any idea how to do it?
Try <Image style={{ height: null, flex: 1, width: null }} /> and play with resizeMode to get the desired result.