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
I am new to react native and trying to make a small user input form, but my code does not work well.
I made a class that will create label and text input, but style does not work for my class, Form1. The class in the same file App.js worked, but importing from another js file did not.
Can someone help me to figure out the solution and why it happens?
App.js
import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import Form1 from './Parts/Form1';
export default function App() {
const [name, setName] = useState('Haruku');
const [age, setAge] = useState('30');
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View>
<Text style={styles.centerBox} borderWidth="1">Enter name: </Text>
<TextInput
style={styles.input}
placeholder='Example'
onChangeText={(val) => setName(val)} />
<Form1 />
<Text>name: {name}, age: {age}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#777',
alignItems: 'center',
justifyContent: 'center',
padding: 8,
margin: 10,
width: 200,
},
centerBox: {
alignSelf: 'center',
textAlign: 'center',
borderWidth: 1,
width: 150,
},
buttonContainer: {
marginTop: 20,
backgroundColor: "#0000FF",
},
});
Form1.js
import React from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
class Form1 extends React.Component {
render() {
return (
<View>
<Text style={styles2.centerBox}>Age: </Text>
<TextInput style={styles2.input} placeholder='Example' />
</View>
)
}
}
const styles2 = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 1,
borderColor: '#777',
alignItems: 'center',
justifyContent: 'center',
padding: 8,
margin: 10,
width: 200,
placeholder: "Ex",
},
centerBox: {
alignSelf: 'center',
textAlign: 'center',
alignItems: 'center',
},
});
export default Form1;
We should import the React when we are creating any component that returns JSX.
Have a try by adding the below import statement on the top of the Form1.js
import React from 'react';
UPDATED CODE
This now fetches the data when button clicked but I cant display it as it did when it loaded first time?
I am totally new with react native so I am sorry if I explain my problem wrong or seem a little thick. I have made a screen that fetches data and displays the data and it seems to work quite well. However I have a couple of buttons and I want to add an onclick to call a function.
Maybe I am getting this wrong but its supposed to work like javascript which I have no problem with but I think I am missing something with the difference between components and functions.
For example in my code its just automatically fetches the data and displays it. How would I make functions to load the data when one the buttons is clicked and also update the view with the new loaded data?
I have tried putting the functions in with the fetch data but I seem to have to add everything but surely I can make re-usable functions for each task like I would in javascript.
I have included my code for the page and also what I have tried. Any help of advice would be great as when I am researching on the net I get confused information between reactjs and native.
Also all the code below has been snippets taken from various places and played around with so it is totally probably all wrong in terms of structure.
The code :
import React from "react";
import {
StyleSheet,
View,
ActivityIndicator,
FlatList,
Text,
StatusBar,
Image,
TouchableOpacity,
ScrollView,
SafeAreaView
} from "react-native";
import Icon from "react-native-vector-icons/Entypo";
import CupertinoButtonPurple1 from "../components/CupertinoButtonPurple1";
import Removebutton from "../components/removebutton";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
dataSource:[] };
}
componentDidMount(){
fetch("https://www.uberfantasies.com/testv2.php")
.then(response => response.json())
.then((responseData)=> {
this.setState({
loading: false,
dataSource: responseData.data
})
})
.catch(error=>console.log(error)) //to catch the errors if any
}
FlatListItemSeparator = () => {
return (
<View/>
);
}
renderItem=(data)=>
<SafeAreaView>
<View style={styles.container}>
<View style={styles.rect}>
<View style={styles.imageRow}>
<Image source={{uri: data.item.image}} style={styles.image} />
<View style={styles.group2Column}>
<View style={styles.group2}>
<Text style={styles.bitch}>
<Text>{data.item.from} sent you a mesage!</Text>
</Text>
<Text style={styles.loremIpsum}>
"{data.item.message}"
</Text>
</View>
<View style={styles.loremIpsum2Row}>
<Text style={styles.loremIpsum2}>{data.item.when}</Text>
<View style={styles.loremIpsum2Filler}></View>
<View style={styles.group3}>
<CupertinoButtonPurple1
style={styles.cupertinoButtonPurple1}
></CupertinoButtonPurple1>
<Removebutton
style={styles.removebutton}
></Removebutton>
</View>
</View>
</View>
</View>
</View>
</View>
</SafeAreaView>
render(){
if(this.state.loading){
return(
<View style={styles.loader}>
<ActivityIndicator size="large" color="#0c9"/>
</View>
)}
return(
<View style={styles.container}>
<FlatList
data= {this.state.dataSource}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem= {item=> this.renderItem(item)}
keyExtractor= {item=>item.id.toString()}
/>
</View>
)}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
loader:{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
},
rect: {
height: 97,
backgroundColor: "rgba(230,230, 230,0.57)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0.57)",
marginTop: 0,
borderBottomWidth: 1,
borderBottomColor: "#d5d5d5",
backgroundColor: "#f4f4f4"
},
image: {
width: 80,
height: 80,
borderRadius: 15,
borderWidth: 4,
borderColor: '#ffffff',
shadowColor: '#d5d5d5',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2
},
group2: {
height: 41
},
bitch: {
fontFamily: "sans-serif-condensed",
color: "#121212",
fontSize: 14,
height: 17,
fontWeight: "bold",
marginTop: 2
},
loremIpsum: {
fontFamily: "sans-serif-condensed",
color: "#121212",
height: 17,
width: 159,
marginTop: 4
},
loremIpsum2: {
fontFamily: "sans-serif-condensed",
color: "#121212",
fontSize: 10,
marginTop: 8
},
loremIpsum2Filler: {
flex: 1,
flexDirection: "row"
},
group3: {
width: 125,
height: 26,
flexDirection: "row",
justifyContent: "space-between",
marginRight: 25
},
cupertinoButtonPurple1: {
height: 25,
width: 57
},
cupertinoButtonDanger2: {
height: 25,
width: 57
},
loremIpsum2Row: {
height: 26,
flexDirection: "row",
marginTop: 17,
marginRight: 33,
width: "100%"
},
group2Column: {
width: 275,
marginLeft: 16
},
imageRow: {
height: 84,
flexDirection: "row",
marginTop: 8,
marginLeft: 4
}
});
and the way I have tried to make a function and the way I think it should work with results?
The UPDATED code that fetches data but I cant get it to display data how it did in the previous code? Going out my nut here because I think Im missing something silly. If I had only one element to display or change I could do it but I think its because it looks through the results? Am i wrong?
Heres the code:
import React, { useState, Component } from 'react'
import {
StyleSheet,
View,
ActivityIndicator,
FlatList,
Text,
StatusBar,
Image,
TouchableOpacity,
ScrollView,
SafeAreaView
} from 'react-native'
class App extends Component {
state = {
loading: true,
dataSource:[],
Status: "Not loaded"
}
onPress = () => {
fetch("https://www.uberfantasies.com/testv.php")
.then(response => response.json())
.then((responseData)=> {
this.setState({
loading: false,
Status: "Loaded",
dataSource: responseData.data
})
console.log(this.state.dataSource)
})
.catch(error=>console.log(error)) //to catch the errors if any
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text>Click me</Text>
</TouchableOpacity>
<View>
<Text>
Status : { this.state.Status }
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10
},
loader:{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff"
}
})
export default App;
if you want to call a function within onPress you need to call it. Like
<Button title="Press Me" onPress={() => ReloadData()} />
Below is a sample code snippet. I have used the function component as it is easy for a beginner. Assuming your output of the API call is a list, I am setting it to the state variable. SO whenever the 'apiData' variable value changes your component will re-render. You can user either a button or a touchable wrapper component for a clickable item.
const [apiData, setApiData] = useState([]);
const MySampleComponent = () => {
const apiCall = () => {
//Your code
setApiData(result);
};
const renderListItem = (itemData) => <Text>{itemData.item.<your key>}</Text>;
return (
<View>
<FlatList
keyExtractor={item => item.id}
data={apiData}
renderItem={renderListItem}
/>
<Button onPress={apiCall} />
<TouchableOpacity onPress={apiCall}>
<Text>Click Me</Text>
</TouchableOpacity>
</View>
);
};
Thanks for your comments and help, I think I have a much better way of understanding a few things now. I have managed to get a load button to fetch data and display it in the way as previously managed. I know it does not look like much progress but trust me this is a big step to getting to grips with the way things work for me.
Now time to play around with it, thanks again.
The working code (well best I can do at the minute!)
import React, { useState, Component } from 'react';
import {
StyleSheet,
View,
ActivityIndicator,
FlatList,
Text,
StatusBar,
Image,
TouchableOpacity,
ScrollView,
SafeAreaView,
} from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
import CupertinoButtonPurple1 from '../components/CupertinoButtonPurple1';
import CupertinoButtonDanger2 from '../components/CupertinoButtonDanger2';
class App extends Component {
state = {
loading: false,
dataSource: [],
Status: 'Not loaded',
};
componentDidMount() {
// this.onPress();
}
onPress = () => {
this.setState({
loading: true,
});
fetch('https://www.uberfantasies.com/testv.php')
.then((response) => response.json())
.then((responseData) => {
this.setState({
loading: false,
Status: 'Loaded',
dataSource: responseData.data,
});
console.log(this.state.dataSource);
})
.catch((error) => console.log(error)); //to catch the errors if any
};
FlatListItemSeparator = () => {
return <View />;
};
renderItem = (data) => (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.rect}>
<View style={styles.imageRow}>
<Image source={{ uri: data.item.image }} style={styles.image} />
<View style={styles.group2Column}>
<View style={styles.group2}>
<Text style={styles.bitch}>
Bitch from Cov sent you a mesage!
</Text>
<Text style={styles.loremIpsum}>
"Hi there you Sexy Beast!"
</Text>
</View>
<View style={styles.loremIpsum2Row}>
<Text style={styles.loremIpsum2}>12 Feb 2022, 6.05 pm</Text>
<View style={styles.loremIpsum2Filler}></View>
<View style={styles.group3}>
<CupertinoButtonPurple1
style={
styles.cupertinoButtonPurple1
}></CupertinoButtonPurple1>
<CupertinoButtonDanger2
style={
styles.cupertinoButtonDanger2
}></CupertinoButtonDanger2>
</View>
</View>
</View>
</View>
</View>
</View>
</SafeAreaView>
);
render() {
if (this.state.loading) {
return (
<View style={styles.loader}>
<ActivityIndicator size="large" color="#0c9" />
</View>
);
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this.onPress}>
<Text>Click me</Text>
</TouchableOpacity>
<View>
<Text>Status : {this.state.Status}</Text>
</View>
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={(item) => this.renderItem(item)}
keyExtractor={(item) => item.id.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10,
},
loader: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
rect: {
height: 97,
backgroundColor: 'rgba(230,230, 230,0.57)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0.57)',
marginTop: 0,
borderBottomWidth: 1,
borderBottomColor: '#d5d5d5',
backgroundColor: '#f4f4f4',
},
image: {
width: 80,
height: 80,
borderRadius: 15,
borderWidth: 4,
borderColor: '#ffffff',
boxShadow: '0px 2px 4px 0px rgb(0 0 0 / 55%)',
},
group2: {
width: 275,
height: 41,
},
bitch: {
fontFamily: '-apple-system,Segoe UI,Roboto,sans-serif',
color: '#121212',
fontSize: 14,
height: 17,
fontWeight: 'bold',
marginTop: 2,
},
loremIpsum: {
fontFamily: '-apple-system,Segoe UI,Roboto,sans-serif',
color: '#121212',
height: 17,
width: 159,
marginTop: 4,
},
loremIpsum2: {
fontFamily: '-apple-system,Segoe UI,Roboto,sans-serif',
color: '#121212',
fontSize: 10,
marginTop: 8,
},
loremIpsum2Filler: {
flex: 1,
flexDirection: 'row',
},
group3: {
width: 121,
height: 26,
flexDirection: 'row',
justifyContent: 'space-between',
},
cupertinoButtonPurple1: {
height: 25,
width: 57,
},
cupertinoButtonDanger2: {
height: 25,
width: 57,
},
loremIpsum2Row: {
height: 26,
flexDirection: 'row',
marginTop: 17,
marginRight: 3,
},
group2Column: {
width: 275,
marginLeft: 16,
},
imageRow: {
height: 84,
flexDirection: 'row',
marginTop: 8,
marginLeft: 4,
},
});
export default App;
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.
Help, Im trying code an app an I can't seem to get past this error.
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
module.exports = Main;
I believe the problem lies in this block
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
There error message is: SyntaxError /Users/tevinrivera/Rondeh/App/Components/Main.js: Unterminated JSX contents(57:41)
Your imports are wrong. You need to import React from 'react' and other things like View, Stylesheet etc from 'react-native'.
Something like will work:
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
Everything looks fine. Try changing this code
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
to this
const React = require('React');
const ReactNative = require('react-native');
const{
StyleSheet,
View,
Text
} = ReactNative;