Good way to coding on React-Native?

Question

I'm new on this field of coding, and I start to create by myself a project for iOS and Android. I'm a bit lost of how I supposed to organize my code, I saw different persons on YouTube doing their code by different way. I want help to know what is the best to how to write a code, who it will be understanding by people who can help me on my project on the futur. Thank you for your help, im coding in React Native.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { StyleSheet, Text, View, TouchableOpacity, ImageBackground, Dimensions } from 'react-native';

export default function App() {
  return (

    
    <View style={styles.container}>
      <ImageBackground source={require('./assets/Image/home-pic.jpg')} style={styles.backgroundImage}>
        <View style={styles.rectangle}>
          <Text style={styles.Text1}>T1</Text>
          <Text style={styles.Text2}>T2</Text>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText1}>T-BUTTON1</Text>
          </TouchableOpacity>
          <View style={styles.horizontalButtons}>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText2}>Sign Up</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText3}>Sign In</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ImageBackground>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  backgroundImage: {
      flex: 1,
      width: wp('100%'),
      height: hp('100%'),
      resizeMode: 'cover',
    },
  rectangle: {
    backgroundColor: '#F5F5F5',
    borderTopLeftRadius: hp('4%'),
    borderTopRightRadius: hp('4%'),
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
    padding: hp('4.5%'),
    flex: 1,
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  Text1: {
    fontSize: hp('1.6%'),
    paddingVertical: hp('1%'),
    marginBottom: hp('1%'),
  },
  Text2: {
    fontSize: hp('2.0%'),
    fontWeight: 'bold',
    marginBottom: hp('1%'),
  },
  buttonText1: {
    color: '#c0334b',
    fontSize: hp('1.6%'),
    fontWeight: 'bold',
    textAlign: 'left',
    paddingVertical: hp('1%'),
    marginBottom: hp('1%'),
  },
  horizontalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: hp('1%'),
  },  
  buttonText2: {
    backgroundColor: '#c0334b',
    color: '#fff',
    fontSize: hp('1.6%'),
    fontWeight: 'bold',
    textAlign: 'left',
    paddingVertical: hp('1.2%'),
    paddingHorizontal: wp('13%'),
    borderRadius: hp('2%'),
    overflow: 'hidden',
    borderWidth: 1.5,
    borderColor: '#c0334b',
},
  buttonText3: {
    color: '#c0334b',
    fontSize: hp('1.6%'),
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: hp('1.3%'),
    paddingHorizontal: wp('12%'),
    borderRadius: hp('2%'),
    overflow: 'hidden',
    borderWidth: 1.5,
    borderColor: '#c0334b',
  },
});