Im new to this framework, So this is the code:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { MainLogo } from '../../logos/mainLogo';
import { TextInput } from "react-native";
export function Home() {
return (
<SafeAreaView>
<View style={styles.firstBackGround}>
<MainLogo/>
<Text style={{fontSize:25,fontWeight:'bold',color:'rgb(108,
150, 232)',}}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style=
{styles.secondBackGround} placeholderTextColor="#6b7eb1" >
</TextInput>
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection:'row',
alignItems:'center',
flex:0,
},
secondBackGround:{
backgroundColor: '#3f4d7e',
width:'83%',
marginTop:10,
height:'17%',
borderRadius:20,
flex:0,
marginLeft:'auto',
marginRight:'auto',
paddingLeft: 20,
},
recommendedText:{
fontSize:17,
flex:0,
flexDirection:'row',
fontWeight:'bold',
color:'rgb(108, 150, 232)',
marginLeft:20,
marginTop:100,
}
});
here is the image of result:
the more i increase the top margin for recommended text, it auto changes the input field height. I solved this problem by mistake between First View and text input but i cant do it again between text input and Text(recommended)
the height is increasing because you gave it in % and also flex:0 has no impact.
use like this
import React from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { TextInput } from "react-native";
const { width } = Dimensions.get('window')
export default function SettingsScreen() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.firstBackGround}>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'rgb(108,150, 232)', }}>LIBRARY</Text>
</View>
<TextInput placeholder='Search Song or Artist' style={styles.secondBackGround} placeholderTextColor="#6b7eb1" />
<Text style={styles.recommendedText}>Recommended</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create(
{
container: {
},
firstBackGround: {
flexDirection: 'row',
alignItems: 'center',
flex: 0,
},
secondBackGround: {
backgroundColor: '#3f4d7e',
width: '83%',
marginTop: 10,
// height: '17%',
height: width / 7.5,
borderRadius: 20,
// flex: 0,
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: 20,
},
recommendedText: {
fontSize: 17,
// flex: 0,
flexDirection: 'row',
fontWeight: 'bold',
color: 'rgb(108, 150, 232)',
marginLeft: 20,
marginTop: 200,
backgroundColor: 'red'
}
});
if you want to make design responsive then
step:1 - get a scale of figma or xd screen (eg 375 width)
step:2 -say your height of a view is 50 then divide 375/50 = 7.5
step:3 - use height width/7.5 ( width of your current window, get this by using Dimensions API)
another way is use this library react-native-size-matters
Related
I have an app with a basic home screen component that is full screen and I want to do it that the user can scroll down to the next component that I made that is also full screen (like the scroll on TikTok between videos) but when I add ScrollView the screen goes white
how can I add scroll to the app?
code app.js:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, ImageBackground, Image, View, ScrollView, } from 'react-native';
import Riverdale from './components/riverdale';
export default function App() {
return (
<ScrollView>
<View style={styles.container}>
<Riverdale
backgroundImage={require('./assets/images/riverdale.jpg')}
titleText="Riverdale"
subTitleText="The town with pep"
content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
titleTextStyle={{
fontSize: 42,
color: '#fff',
fontWeight: '600',
}}
subTitleTextStyle={{
fontSize: 12,
//transform to upper case
textTransform: 'uppercase',
color: '#FDEFF4',
}}
contentTextStyle={{
fontSize: 18,
color: '#fff',
}}
//titleTextStyle= {styles.titleText}
//subTitleTextStyle= {styles.subTitleText}
//contentTextStyle= {styles.contentText}
/>
<Riverdale
backgroundImage={require('./assets/images/riverdale.jpg')}
titleText="Riverdale"
subTitleText="The town with pep"
content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
titleTextStyle={{
fontSize: 42,
color: '#fff',
fontWeight: '600',
}}
subTitleTextStyle={{
fontSize: 12,
//transform to upper case
textTransform: 'uppercase',
color: '#FDEFF4',
}}
contentTextStyle={{
fontSize: 18,
color: '#fff',
}}
/>
<StatusBar style="auto" />
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
code index.js:
import React from "react";
import { StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from "react-native";
const Riverdale = (props) => {
const {backgroundImage, titleText, subTitleText, content} = props;
const {titleTextStyle, subTitleTextStyle, contentTextStyle} = props;
return (
<ImageBackground source={backgroundImage} style={styles.imgBackground}>
<View style={styles.title}>
<Text style={titleTextStyle}>{titleText}</Text>
<View style={styles.subTitle}>
<Text style={subTitleTextStyle}>{subTitleText}</Text>
</View>
</View>
<View style={styles.content}>
<Text style={contentTextStyle}>{content}</Text>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
title: {
width: '100%',
position: 'absolute',
top: '10%',
alignItems: 'center',
justifyContent: 'center',
},
subTitle: {
},
imgBackground: {
width: '100%',
height: '100%',
//set the image to cover the entire screen
resizeMode: 'cover',
},
content: {
width: '100%',
position: 'absolute',
top: '20%',
},
});
export default Riverdale;
Hi i'm new in REACT NATIVE, i have a in my react native app, with style of a card like the code below. first i want to split it into two horizontally parts with the ratio of( 3 for upper part and 2 for lower part). And second i want to write on each part.
I
import React from "react";
import {
Button,
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
} from "react-native";
export default function App() {
return(
<View style={styles.card}>
<View style={styles.results}>
<Text style={styles.texty}>numbers</Text>
</View>
<View style={styles.calculations}>
<Text>numbers</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
card: {
flex: 1,
width: "80%",
height: 100,
shadowColor: "black",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.26,
elevation: 5,
backgroundColor: "white",
padding: 100,
borderRadius: 15,
marginTop: 80,
margin: 42,
justifyContent: "center",
},
texty: {
fontSize: 30,
},
calculations: {
fontSize: 34,
},
results: {
flex: 6,
paddingTop: 25,
justifyContent: "center",
alignItems: "flex-end",
borderBottomWidth: 0.3,
borderBottomColor: "grey",
});
brought my code down there
Please use flex property to achieve this like:
card: { flex: 1 }
results: { flex: .6, flexWrap:'wrap'}
calculations: {flex:.4, flexWrap:'wrap'}
P.S:
You can add other styles as you like but don't use height property.
I'm new to react native, and I facing a problem to positioning my text.
I wanted to have something like this:
Hi, Daffa
XII RPL
but this my result:
Hi, Daffa XII RPL
here's my code:
import React from 'react';
import {View, StyleSheet, Text, Image} from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('../assets/me.png')} />
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
thanks for reading this, I'm sorry if my question is kinda stupid, and sorry for my bad english.
Working App: Expo snack
Wrap Text components in View component:
import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
export default function Header() {
return (
<View style={styles.header}>
<Image style={styles.img} source={require('./assets/snack-icon.png')} />
<View>
<Text style={styles.text}>Hi, Daffa Quraisy</Text>
<Text style={styles.kelas}>XII RPL</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
header: {
height: 200,
backgroundColor: '#327fe3',
flexDirection: 'row',
alignItems: 'center',
},
img: {
height: 50,
width: 50,
marginLeft: 20,
padding: 0,
},
text: {
color: 'white',
marginLeft: 18,
fontWeight: 'bold',
},
kelas: {
color: 'white',
fontSize: 12,
marginLeft: 18,
flexWrap: 'nowrap',
},
});
you can use {\n} this tag to break line
<View style={styles.header}>
<Image style={styles.img} source={require('../assets/me.png')} />
<Text style={styles.text}>Hi, Daffa Quraisy {`\n`} <Text style={styles.kelas}>
XII RPL</Text>
</Text>
</View>
The <View> element is the default value column but you header class with change row. New <View> element wrapper texts for your fix.
I'm a Newbie in React Native. And I'm trying to create a login screen with a normal "ENTER" button and Facebook and google "login with" buttons. For the social network buttons, I used expo vector-icons, but for the normal button, I created a .js file to host the button code so I can use it on other pages. The problem is: the button's styles are not being applied when I'm using it on this specific screen, for some reason... Am I doing something wrong?
Here is the code for the login screen:
import React from 'react';
import { View, Text, KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
import { FontAwesome, Zocial } from '#expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import SubmitButton from '../../shared/SubmitButton';
import FocusAwareStatusBar from '../../shared/StatusBar';
const styles = StyleSheet.create({
background: {
flex: 1,
backgroundColor: '#fafafa',
alignItems: 'center',
justifyContent: 'flex-start',
paddingHorizontal: 16
},
loginform: {
alignSelf: "stretch",
marginTop: 64,
},
inputs: {
alignSelf: "stretch",
fontFamily: "Roboto_400Regular",
fontSize: 14,
color: "#000",
borderBottomColor: '#dcdcdc',
borderBottomWidth: 0.8,
paddingBottom: 8,
paddingLeft: 12,
},
loginSocialNetworkContainer: {
justifyContent: "center",
alignSelf: "center",
backgroundColor: '#fff',
elevation: 6,
borderRadius: 6,
marginBottom: 8,
},
loginSocialNetwork: {
alignContent: "center",
justifyContent: "center",
width: 232,
height: 40,
borderRadius: 2,
},
loginSocialNetworkText: {
fontSize: 12,
fontFamily: "Roboto_400Regular",
color: "#f7f7f7",
},
});
export default function Login({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<FocusAwareStatusBar barStyle='light-content' backgroundColor='#88c9bf' />
<KeyboardAvoidingView style={styles.background}>
<View style={styles.loginform}>
<TextInput style={{ ...styles.inputs, marginBottom: 20 }}
placeholder="Nome de usuário"
autoCorrect={false}
onChangeText={() => { }}
/>
<TextInput style={{ ...styles.inputs, marginBottom: 52 }}
placeholder="Senha"
autoCorrect={false}
secureTextEntry={true}
onChangeText={() => { }}
/>
<SubmitButton text='ENTRAR' onPress={() => { }} />
<View style={{ ...styles.loginSocialNetworkContainer, marginTop: 72 }}>
<FontAwesome.Button name='facebook-square' style={styles.loginSocialNetwork} size={17.5} iconStyle={{ color: '#f7f7f7' }} backgroundColor="#194f7c" onPress={() => { }}>
<Text style={styles.loginSocialNetworkText}>ENTRAR COM FACEBOOK</Text>
</FontAwesome.Button>
</View>
<View style={styles.loginSocialNetworkContainer}>
<Zocial.Button name='googleplus' style={styles.loginSocialNetwork} size={15} iconStyle={{ color: '#f7f7f7', marginRight: 9.3, marginLeft: 0.3 }} backgroundColor="#f25f5c" onPress={() => { }}>
<Text style={{ ...styles.loginSocialNetworkText, paddingRight: 14 }}>ENTRAR COM GOOGLE</Text>
</Zocial.Button>
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
And here is the SubmitButton's code:
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
export default function SubmitButton({ text, onPress, color }) {
return (
<View style={styles.container}>
<TouchableOpacity onPress={onPress}>
<View style={ color != null ? {...styles.button, backgroundColor: color} :styles.button} >
<Text style={styles.buttonText}>{text}</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignSelf: "center",
backgroundColor: '#fafafa',
elevation: 6,
borderRadius: 2,
width: 232,
height: 40,
},
button: {
justifyContent: "center",
alignItems: "center",
backgroundColor: '#88c9bf',
width: 232,
height: 40,
borderRadius: 2,
},
buttonText: {
fontFamily: "Roboto_400Regular",
fontSize: 12,
textTransform: 'uppercase',
textAlign: "center",
color: '#434343',
}
});
As we can see, the elevation is not getting applied nor the button can be
pressed:
Import React in your login page
import React from 'react';
import { View, Text, KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
import { FontAwesome, Zocial } from '#expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import SubmitButton from '../../shared/SubmitButton';
import FocusAwareStatusBar from '../../shared/StatusBar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
return (
<View style={styles.container}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 50,
},
bigBlue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
export default LotsOfStyles;
I have been trying to develop screen mentioned below:
For that I have created below component:
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
import Balance from './Balance.js'
class AccountHeader extends React.Component{
render(){
return(
<ImageBackground
source={require('../images/lawrance.jpg')}
style={styles.container}>
<View style={styles.overlay}></View>
<Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
<Image source= {require('../images/lawrance.jpg')}
style={styles.avatarStyle}/>
<Text style = {styles.textStyle} > Jenifer Lawrance</Text>
<Text style = {styles.textStyle} > +14155552671</Text>
<Balance style= {styles.balanceContainer}/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'red',
opacity: 0.6
},
overlay: {
backgroundColor:'transparent',
opacity: 0.6
},
avatarStyle: {
width:100,
height: 100,
marginTop: 10,
borderRadius: 50,
alignSelf: 'center',
},
textStyle: {
marginTop: 10,
fontSize: 18,
color: "#FFFFFF",
fontWeight: 'bold',
alignSelf: 'center',
},
balanceContainer:{
padding:10,
}
});
export default AccountHeader;
Now here are two issues:
Changing the opacity of ImageBackground also change the opacity of its children
Not able to change the color of opacity
Any help appreciated!
Design screen:
Developed Screen
Try this :
<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle=
{{opacity:0.5}}/>
it works
Use this code, it's working, I just made a minor change
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image,Dimensions} from 'react-native';
class AccountHeader extends React.Component{
render(){
return(
<ImageBackground
source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.container}>
<View style={styles.overlay}>
<Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
<Image source= {{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.avatarStyle}/>
<Text style = {styles.textStyle} > Jenifer Lawrance</Text>
<Text style = {styles.textStyle} > +14155552671</Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
},
overlay: {
backgroundColor:'rgba(255,0,0,0.5)',
},
avatarStyle: {
width:100,
height: 100,
marginTop: 10,
borderRadius: 50,
alignSelf: 'center',
},
textStyle: {
marginTop: 10,
fontSize: 18,
color: "#FFFFFF",
fontWeight: 'bold',
alignSelf: 'center',
},
balanceContainer:{
padding:10,
}
});
export default AccountHeader;
For me worked just applying some opacity to the ImageBackground component and at the same time a background color like this:
<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>
Try changing the container's style to
container: {
backgroundColor: 'rgba(255,0,0,.6)'
},