3
\$\begingroup\$

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

1 Answer 1

3
\$\begingroup\$
  • 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, 
  }
});
\$\endgroup\$
5
  • 1
    \$\begingroup\$ Could you please explain your code ? Is this an alternative solution or an improvement of the OP's approach ? \$\endgroup\$ Commented Aug 19, 2020 at 12:49
  • 1
    \$\begingroup\$ it's an improvement! \$\endgroup\$
    – Pankaj
    Commented Aug 19, 2020 at 12:52
  • \$\begingroup\$ It would be good if you explain what you improved \$\endgroup\$ Commented Aug 19, 2020 at 12:53
  • \$\begingroup\$ basically i cleaned the main render by exporting it to a method and fetched the images from a static variable. \$\endgroup\$
    – Pankaj
    Commented Aug 19, 2020 at 13:28
  • 1
    \$\begingroup\$ 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. \$\endgroup\$
    – pacmaninbw
    Commented Aug 19, 2020 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.