Develop Reference

Custom components does not work in React Native

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';

React Native: Module not found: Can't resolve './src/BlurView'

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

Text not displaying inside View

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'
}
});

How to keep the memory of app after totally closing the app in React Native

I am using react native to build an app and the only problem i am having is that i have a progress bar that keeps track of the users progress but when I close the app completely and open it back up everything resets to its original data. How do I make it so it will keep the data when they close the app?
Not sure how to add in the AsyncStorage
Here is my code:
'use strict';
var React = require('react-native');
var ProgressBar = require('react-native-progress-bar');
var {
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var PROGRESS = 0;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
},
button: {
alignSelf: 'center',
marginTop: 50,
width: 100,
height: 50,
backgroundColor: '#0059FF',
borderRadius: 8,
borderWidth: 2,
borderColor: '#0059FF'
},
buttonClear: {
alignSelf: 'center',
marginTop: 10,
width: 100,
height: 50,
backgroundColor: '#3B3A3A',
borderRadius: 8,
borderWidth: 2,
borderColor: '#3B3A3A'
},
buttonText: {
fontSize: 18,
textAlign: 'center',
lineHeight: 33,
color: '#FFF',
}
});
class BasicStorageExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: PROGRESS
};
}
onButtonPress() {
this.setState({
progress: PROGRESS += 0.2
});
}
onButtonClearPress() {
PROGRESS = 0;
this.setState({
progress: 0
});
}
render() {
return (
<View style={styles.container}>
<ProgressBar
fillStyle={{}}
backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
style={{marginTop: 10, width: 300}}
progress={this.state.progress} />
<TouchableHighlight
style={styles.button}
underlayColor='#002C7F'
onPress={this.onButtonPress.bind(this)}>
<Text style={styles.buttonText}>Done</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.buttonClear}
underlayColor='#002C7F'
onPress={this.onButtonClearPress.bind(this)}>
<Text style={styles.buttonText}>Clear</Text>
</TouchableHighlight>
</View>
);
}
};
AppRegistry.registerComponent('BasicStorageExample', () => BasicStorageExample);

you can try taking a look at this article by Nic Raboy. It has a video demonstration as well as example code.
https://blog.nraboy.com/2015/09/saving-data-in-your-react-native-mobile-application/
Here is some example code (from the article) that demonstrates saving your data with async storage. Cheers!
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
AsyncStorage,
} = React;
var ReactProject = React.createClass({
componentDidMount: function() {
AsyncStorage.getItem("myKey").then((value) => {
this.setState({"myKey": value});
}).done();
},
getInitialState: function() {
return { };
},
render: function() {
return (
<View style={styles.container}>
<Text style={styles.saved}>
{this.state.myKey}
</Text>
<View>
<TextInput
style={styles.formInput}
onChangeText={(text) => this.saveData(text)}
value="" />
</View>
<Text style={styles.instructions}>
Type something into the text box. It will be saved to
device storage. Next time you open the application, the saved data
will still exist.
</Text>
</View>
);
},
saveData: function(value) {
AsyncStorage.setItem("myKey", value);
this.setState({"myKey": value});
}
});
var styles = StyleSheet.create({
container: {
padding: 30,
flex: 1,
justifyContent: "center",
alignItems: "stretch",
backgroundColor: "#F5FCFF",
},
formInput: {
flex: 1,
height: 26,
fontSize: 13,
borderWidth: 1,
borderColor: "#555555",
},
saved: {
fontSize: 20,
textAlign: "center",
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
marginTop: 5,
},
});
AppRegistry.registerComponent('ReactProject', () => ReactProject);

React Native: <Text> won't render if placed inside <TouchableHighlight>

In the following code:
'use strict';
var React = require('react-native'),
{
AppRegistry,
StyleSheet,
Text,
View,
Component,
NavigatorIOS
} = React,
styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
text: {
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
}
})
class Login extends Component {
render() {
return (
/*<TouchableHighlight
style={styles.button}
underlayColor='#99d9f4'>*/
<Text style={styles.text}>Login with Google</Text>
/*</TouchableHighlight>*/
)
}
}
module.exports = Login
The <Text> Login gets rendered only when the surrounding <TouchableHighlight> is commented out. What am I doing wrong?

You need to import 'TouchableHighlight'.
Add TouchableHighlight to your list of requires.
var React = require('react-native'),
{
AppRegistry,
StyleSheet,
Text,
View,
Component,
NavigatorIOS,
TouchableHighlight
} = React,

In order to use the tag, you have to import it in the destructuring assignment block just like Text and View.