Minimize Hard Coding in React Native
To clean the main render, we can extract the below JSX into a method and render that method into the main render.

&lt;View style={styles.container}&gt;
          &lt;View style={styles.border}&gt;
          &lt;Image source={{uri: URI}} style={styles.image}/&gt;
          &lt;/View&gt;
      &lt;/View&gt;)


For image url, instead of assigning it directly into the &lt;Img &gt; 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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80'

  defaultView = () =&gt; { 
   return(
     &lt;View style={styles.container}&gt;
          &lt;View style={styles.border}&gt;
          &lt;Image source={{uri: URI}} style={styles.image}/&gt;
          &lt;/View&gt;
      &lt;/View&gt;)}

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