React native – Convert pixel to percentage React-Native javascript

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  const buttonFontSize = (height * 3) / 100;

  const handleBlur = () => {
    // Joue le son lorsque l'utilisateur quitte le champ de texte
    sound.play((success) => {
      if (!success) {
        console.log('Sound did not play');
      }
    });
  };

  return (
    <View style={[styles.container, { backgroundColor: isDarkTheme ? '#001F3F' : '#BF2A2A' }]}>
      <View style={styles.circleContainer}>
        {profileImage 
          ? <Image source={profileImage} style={styles.profileImage} /> 
          : <View style={styles.circle} />}
      </View>
      <TouchableOpacity 
        style={[styles.button, { backgroundColor: isDarkTheme ? '#FFD700' : '#FF5733' }]} 
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.buttonText}>Change profile picture</Text>
      </TouchableOpacity>

      <TextInput
        style={styles.usernameInput}
        placeholder="Enter your username"
        value={username}
        onChangeText={handleUsernameChange}
        onBlur={handleBlur} // Ajoutez l'événement onBlur ici
      />

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <TouchableOpacity style={styles.closeButton} onPress={() => setModalVisible(false)}>
            <Text style={styles.closeButtonText}>Close</Text>
          </TouchableOpacity>
          
          <View style={styles.imageContainer}>
            <Animated.View style={[styles.swipeImageContainer, animatedStyle]}>
              <Image source={{ uri: profileImageUrls[currentIndex] }} style={styles.swipeImage} />
            </Animated.View>
            <View style={styles.buttonContainer}>
              <Pressable onPress={() => onSwipeComplete('right')} style={styles.arrowButton}>
                <Image source={require('./assets/arrow-left.png')} style={styles.arrowImage} />
              </Pressable>
              <Pressable onPress={() => onSwipeComplete('left')} style={styles.arrowButton}>
                <Image source={require('./assets/arrow-right.png')} style={styles.arrowImage} />
              </Pressable>
            </View>
            <Pressable onPress={() => handleSelectImage(profileImageUrls[currentIndex])} style={styles.selectButton}>
              <Text style={[styles.selectButtonText, { fontSize: buttonFontSize }]}>Select</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: '10%',
  },
  circleContainer: {
    alignItems: 'center',
    marginBottom: '5%',
  },
  usernameInput: {
    marginTop: '3%',
    width: '80%',
    paddingVertical: '2%',
    paddingHorizontal: '5%',
    borderRadius: 8,
    borderColor: '#ccc',
    borderWidth: 1,
    backgroundColor: '#FFF',
    fontSize: 16,
    textAlign: 'center',
  },
  circle: {
    width: '90%',
    aspectRatio: 1,
    borderRadius: 9999,
    backgroundColor: '#FFF',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: '5%',
  },
  profileImage: {
    width: '90%',
    aspectRatio: 1,
    borderRadius: 9999,
    resizeMode: 'cover',
  },
  button: {
    marginTop: '3%',
    width: '60%',
    paddingVertical: '2%',
    borderRadius: 8,
    alignItems: 'center',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.7)',
  },
  closeButton: {
    alignSelf: 'flex-end',
    marginBottom: 20,
    padding: 10,
  },
  closeButtonText: {
    fontSize: 16,
    color: '#FFF',
  },
  imageContainer: {
    width: '80%',
    height: '50%',
    backgroundColor: '#FFF',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  swipeImageContainer: {
    width: '100%',
    height: '80%',
  },
  swipeImage: {
    width: '100%',
    height: '100%',
    top: '15%',
    borderRadius: 10,
    resizeMode: 'contain',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '80%',
    marginTop: 10,
  },
  arrowButton: {
    padding: 10,
    marginHorizontal: '50%',
    marginLeft: '0%',
  },
  arrowImage: {
    width: 60, // Adjust the width as needed
    height: 40, // Adjust the height as needed
    right: '30%',
    marginHorizontal: '10%',
    top: '150%',
  },
  selectButton: {
    marginBottom: '10%',
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#007BFF',
    borderRadius: 8,
    left: '1%',
  },