Minimize Hard Coding in React Native

Question

Can anybody help me to minimize my hard coding? Also please give me any suggestions for improving my code for the future?

My Source Code:

 export default class App extends React.Component {
 render() {
 return (
 <View style={styles.container}>
 <View style={styles.border}>
 <Image source={{uri:'https://images.unsplash.com/photo-1579551356536-e2d17fe1c7fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80'}} style={styles.image}/>
 </View>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#fff',
 padding: 8,
 },
 border:{
 width: 200, 
 height: 300,
 borderTopEndRadius: 50,
 borderBottomStartRadius: 50,
 borderRadius: 15, 
 backgroundColor: 'red', 
 shadowColor: '#000',
 shadowOffset: { width: 0, height: 2 },
 shadowOpacity: 0.8,
 shadowRadius: 8, 
 },
 image:{
 width:'100%', 
 height: '100%', 
 borderTopEndRadius: 50,
 borderBottomStartRadius: 50,
 borderRadius: 15, 
 }
});

Answer 1

• To clean the main render, we can extract the below JSX into a method and render that method into the main render.

<View style={styles.container}>
 <View style={styles.border}>
 <Image source={{uri: URI}} style={styles.image}/>
 </View>
 </View>)

• For image url, instead of assigning it directly into the <Img > tag, we can declare a static property or even in the constructor or state, then can use accordingly.

• Further refactoring can be done by extracting the StyleSheet into a separate Style.js.

• All the colors used can be used from a single file.

Modified Code:

 export default class App extends React.Component {
 static URI = 'https://images.unsplash.com/photo-1579551356536-e2d17fe1c7fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80'
 defaultView = () => { 
 return(
 <View style={styles.container}>
 <View style={styles.border}>
 <Image source={{uri: URI}} style={styles.image}/>
 </View>
 </View>)}
 render() {
 return (
 {this.defaultView()}
 );
 }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#fff',
 padding: 8,
 },
 border:{
 width: 200, 
 height: 300,
 borderTopEndRadius: 50,
 borderBottomStartRadius: 50,
 borderRadius: 15, 
 backgroundColor: 'red', 
 shadowColor: '#000',
 shadowOffset: { width: 0, height: 2 },
 shadowOpacity: 0.8,
 shadowRadius: 8, 
 },
 image:{
 width:'100%', 
 height: '100%', 
 borderTopEndRadius: 50,
 borderBottomStartRadius: 50,
 borderRadius: 15, 
 }
});

• Billal BEGUERADJ: Could you please explain your code ? Is this an alternative solution or an improvement of the OP's approach ?
• Pankaj: it's an improvement!
• Billal BEGUERADJ: It would be good if you explain what you improved
• Pankaj: basically i cleaned the main render by exporting it to a method and fetched the images from a static variable.
• pacmaninbw: While this might be a great answer on Stack Overflow, code only alternate solutions are considered bad answers on Code Review. Good answers may not contain any code but they provide meaningful observations about the code. At the top of your answer please explain in detail why you think your code is better in terms of the original code posted.