How can I write well formatted code in React Native? - react-native

Question

I'm new in React Native. I want to write well formatted code so I can manage big apps easily and I can change existing code with new change.
Right now I'm putting all component in single block, so I'm confused when I want to change in that.
I have made registration screen as below. My code messed up and looks so distorted. Please help me how can I manage my code to good fragments way.
import LoginScreen from './Login';
import React, {Component} from 'react';
import 'react-native-gesture-handler';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TextInput,
Button,
Image,
KeyboardAvoidingView,
} from 'react-native';
class RegistrationScreen extends Component {
state = {
textInputTexts: {
username: '',
password: '',
email: '',
phoneno: '',
},
validFlags: {
username: false,
password: false,
email: false,
phoneno: false,
},
};
validateEmail = text => {
console.log(text);
let reg = /^([\w.%+-]+)#([\w-]+\.)+([\w]{2,})$/i;
console.log(reg.test(text));
if (reg.test(text) === false) {
console.log('Email is Not Correct');
return false;
} else {
console.log('Email is Correct');
return true;
}
};
validatePassword = text => {
console.log(text);
var passRegex = new RegExp(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*])(?=.{8,})',
);
console.log(passRegex.test(text));
if (passRegex.test(text) === false) {
console.log('Password is Not Valid');
return false;
} else {
console.log('Password is Correct');
return true;
}
};
validateUsername = text => {
console.log(text);
var usernameRegex = new RegExp('(?=.*[a-fA-F])(?=.{5,})');
console.log(usernameRegex.test(text));
if (usernameRegex.test(text) === false) {
console.log('Username is Not Valid');
return false;
} else {
console.log('Username is Correct');
return true;
}
};
textInputTextChanged = (key, value) => {
var valid = false;
if (key === 'username') {
valid = this.validateUsername(value);
} else if (key === 'password') {
valid = this.validatePassword(value);
} else if (key === 'email') {
valid = this.validateEmail(value);
} else if (key === 'phoneno') {
if (value.length === 10) {
valid = true;
}
}
if (valid) {
console.log('Input is valid');
} else {
console.log('Input is not valid');
}
//this.setState(Object.assign(this.state.textInputTexts, {[key]: value}));
this.setState({
textInputTexts: {...this.state.textInputTexts, [key]: value},
validFlags: {...this.state.validFlags, [key]: valid},
});
//console.log(this.state);
};
signUp = () => {
const {validFlags} = this.state;
console.log('Sign up click');
if (
validFlags.username &&
validFlags.password &&
validFlags.email &&
validFlags.phoneno
) {
// navigate to Login screen
console.log('Go to login screen');
this.props.navigation.navigate('LoginScreen');
}
};
render() {
const {validFlags} = this.state; // this is for constant parameter of this.state to avoid writing this.state.validFlags
console.log(this.state);
const errorImage = (
<Image
source={require('./../images/error-icon.png')}
style={styles.errorImageStyle}
/>
);
return (
<SafeAreaView>
<ScrollView>
<View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder="Username"
autoCapitalize="none"
placeholderTextColor="#a7a7a7"
onChangeText={value =>
this.textInputTextChanged('username', value)
}
/>
{!validFlags.username && errorImage}
</View>
{!validFlags.username && (
<Text style={styles.errorLabelStyle}>
Username must contain 5 alphabets
</Text>
)}
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder="Password"
autoCapitalize="none"
placeholderTextColor="#a7a7a7"
secureTextEntry={true}
onChangeText={value =>
this.textInputTextChanged('password', value)
}
/>
{!validFlags.password && errorImage}
</View>
{!validFlags.password && (
<Text style={styles.errorLabelStyle}>
Password must contain 8 characters with atleast one special
character, Capital and small characters and numbers
</Text>
)}
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder="Email Id"
autoCapitalize="none"
placeholderTextColor="#a7a7a7"
onChangeText={value =>
this.textInputTextChanged('email', value)
}
/>
{!validFlags.email && errorImage}
</View>
{!validFlags.email && (
<Text style={styles.errorLabelStyle}>
Email text should be valid email id
</Text>
)}
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder="Phone No."
autoCapitalize="none"
placeholderTextColor="#a7a7a7"
keyboardType="number-pad"
onChangeText={value =>
this.textInputTextChanged('phoneno', value)
}
/>
{!validFlags.phoneno && errorImage}
</View>
{!validFlags.phoneno && (
<Text style={styles.errorLabelStyle}>
Phone number must contain 10 digits
</Text>
)}
<Button title="Sign Up" onPress={this.signUp} />
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width: 300,
paddingTop: 300,
},
textInput: {
flex: 1,
height: 50,
backgroundColor: '#E2E2E2',
marginTop: 10,
marginRight: 10,
padding: 8,
color: 'black',
borderRadius: 10,
fontSize: 16,
fontWeight: '500',
},
textInputContainer: {
flexDirection: 'row',
alignItems: 'center',
},
errorImageStyle: {
width: 20,
height: 20,
},
errorLabelStyle: {
alignSelf: 'flex-start',
color: 'red',
paddingLeft: 8,
marginBottom: 10,
fontSize: 12,
},
});
const AppNavigator = createStackNavigator(
{
RegistrationScreen: {
screen: RegistrationScreen,
},
LoginScreen: {
screen: LoginScreen,
},
},
{
initialRouteName: 'LoginScreen',
defaultNavigationOptions: {
title: 'App',
},
},
);
export default createAppContainer(AppNavigator);

Answer 1

Best advantages of using react-native is its component driven. You can follow the some of the below mentioned things,
Have separate file for navigation, I see createStackNavigator and other things in registration page, its not good, it must be put in different file.
Separate out styles in different file, each component must have a corresponding style file from where it refers too.
Write as much re-usable components as possible, for ex in your case,
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
placeholder="Email Id"
autoCapitalize="none"
placeholderTextColor="#a7a7a7"
onChangeText={value =>
this.textInputTextChanged('email', value)
}
/>
{!validFlags.email && errorImage}
</View>
Is repeated a lot of times, make it as a separate component and pass only the required props to it, let the common things remain as it is.
For whole application architecture point of view use redux
Use Prettier for code formatting.