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