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.
Related
I have a variable named riskIndex and it can take on values from (0-8). I want to use a progress bar to show the value of this variable. I already have a code for the progress bar and I am not sure how to connect the above-mentioned variable to the code. The existing solutions on the internet seem to implement an animated progress bar and I am not sure if I should be using it, as the variable I am using will not be updating its value. It will have a fixed value on every run. For instance, in this example, I have taken its value to be 4.
I want to show this value 4 as progress on the progress bar.
The code for the progress bar is as follows
import * as React from 'react';
import { Animated,Text, View, StyleSheet } from 'react-native';
import { useEffect, useState } from "react"
import LinearGradient from 'react-native-linear-gradient';
export default function Progressbar() {
let riskIndex=6;
return (
<View style={styles.container}>
<View style={styles.progressLabels}>
<Text style={styles.progressLabel}>Low</Text>
{/* <View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Amateur</Text> */}
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Moderate</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>High</Text>
</View>
<View style={styles.progressContainer}>
<LinearGradient colors={["rgb(15, 25, 75)", "rgb(90, 95, 160)"]} style={styles.progress}/>
<View style={styles.milestonesContainer}>
<View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// paddingTop: Constants.statusBarHeight,
backgroundColor: '#132542',
padding: 8,
},
progressLabels: {
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
width: "100%",
marginBottom: 10,
},
progressLabel: {
fontSize: 12,
fontWeight: 'bold',
//fontFamily: "sans-serif",
width: "19%",
textAlign: "center",
color:'white',
flexWrap:'wrap'
},
progressContainer: {
position: "relative",
height: 100
},
progress: {
marginLeft: "5%",
marginTop: 5,
width: "90%",
height: 30,
// backgroundColor: "rgb(7, 14, 60)",
borderRadius: 15
},
milestonesContainer: {
marginLeft: "5%",
position: "absolute",
width: "100%",
display: "flex",
flexDirection: "row"
},
milestone: {
height: 40,
width: "30%",
//backgroundColor: "white",
borderColor: "rgb(7, 11, 55)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
});
The output of this code looks like
Let's assume you have riskIndex value from 0-10, just to make math simply. Your style milestone is showing progress with white background. All this style needs is to pass percentage of width. I wrote you answer without testing so maybe few tweaks need to be done.
riskIndex_passed = 8;
riskPerc = 8 * 10; // from 0-10, 8 is 80% of 10
riskPerc = riskPerc.toString() + "%"; // convert to string and add % at end
<View style={styles.milestonesContainer}>
<View style={[styles.milestone, {width: riskPerc}]} />
</View>
in StyleSheet I removed width and uncommented backgroundColor
milestone: {
height: 40,
backgroundColor: "white",
borderColor: "rgb(7, 11, 55)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
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
CardItem receives the cardIsLocked prop, which changes frequently and depends on user actions.
TouchableOpacity, that affected by this prop, reflects all app state correctly all the time. I can or can't press on it accordingly to my expectations. That is why I know that its disabled prop re-renders well. But prop style of top View component - doesn't.
So, all interaction works as demanded but styles not re-renders. How could this difference be possible during usage of the same prop cardIsLocked?
Thanks for ideas.
const CardItem = (props) => {
const card = props.card;
const cardIsLocked = props.cardIsLocked;
const handler = props.handler.bind(this, { card });
return (
<View style={cardIsLocked // <-- not causes re-renders
? styles.cardLocked
: styles.cardActive}>
<TouchableOpacity
disabled={cardIsLocked} // <-- causes re-renders
style={styles.innerCardSpace}
onPress={handler}
>
<View style={styles.card}>
<Text style={styles.text}>{card.cardName}</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CardItem;
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "#white",
},
text: { fontWeight: "700", fontSize: 10 },
});
Just to formalize the answer.
The error is the # at the beginning of the color's name.
The # must be used when declaring code RGB like #eeff00. For colors declared as names the # isn't necessary
So the re-rendering is occurring. But the problem is when any attribute of style has an unacceptable format, React doesn't apply it, and tries to keep the last identical attribute or will do nothing.
The code fixed
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "white",
},
text: { fontWeight: "700", fontSize: 10 },
});
I m trying to import Blur View in my app but I m getting this error:-
Module not found: Can't resolve './src/BlurView'
MY CODE
import React from "react";
import { ImageBackground, StyleSheet, Text, View, Button } from "react-native";
import { BlurView } from "#react-native-community/blur";
const App = () => (
<View style={styles.container}>
<ImageBackground source={require ('./assets/bg.jpg') } style={styles.image}>
<View style= {styles.main_container}>
<View style= {styles.button_container}>
<Button title= '1' color= '#ffffff00' />
</View>
</View>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
main_container: {
flex: 1,
height: '100%',
width: undefined,
backgroundColor: '#ffffff30',
},
button_container: {
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderWidth: 1,
borderColor: 'rgb(255,255,255)',
backgroundColor: '#ffffff70',
height: '70%',
width: '100%',
justifyContent: "center",
position: 'absolute',
bottom: 0,
},
button: {
color: '#ffffff00',
},
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "stretch",
justifyContent: "center",
height: '100%',
width: undefined,
},
text: {
color: "white",
fontSize: 42,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000a0"
}
});
export default App;
Im just getting This error by importing Blur View.
Please tell me whats the problem here.
Versions--
React-Native -- 0.63.2
BTW Im getting TypeError in linear gradient package too.. 😔😔
Did you properly compile your app after the package installation?
As it requires a pod installation and a specific setup for Android, it won't work properly before a react-native run
additional instructions at https://github.com/Kureev/react-native-blur
Why is this Text not displaying inside this View? Tried flexing on the circle and text. I like long walks on the beach and writing extra characters to qualify for this post to be active.
import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default class Interest extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.circle}>
<Text style={styles.text}>{this.props.title}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
//flex: 1,
padding: 15,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 10,
minWidth: 80,
alignItems: 'center',
marginBottom: 10
},
text: {
//flex: 0,
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});
Text was hidden by padding and height. Corrected CSS is as follows:
const styles = StyleSheet.create({
circle: {
padding: 8,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 35,
marginBottom: 10,
alignItems: 'center'
},
text: {
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});