oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.4k stars 2.12k forks source link

I have used fontawesome5 in my react native project it works on my emulator but when i run build on my actual cell phone it doesn't sow icons on mobile #1459

Closed asadaa007 closed 1 year ago

asadaa007 commented 2 years ago

import React from 'react'; import { SafeAreaView, StyleSheet, Text, View, Image, StatusBar, Alert, TextInput, TouchableOpacity } from 'react-native'; import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

const Signup =()=>{

return(
    <SafeAreaView style={styles.mainS}>
      <Text style={styles.titleHead}>Create Account</Text>
      <Text style={styles.desc}>Signup to keep exploring amazing destination around the world!</Text>

      {/* Form starting */}

      <View style={styles.formStyle}>
      <View style={styles.OuterBox}>
      <FontAwesome5 style={styles.ico} name={'user'} size={20} solid />
      <TextInput
        style={styles.inputbox }
        placeholder={'Full Name'}
        placeholderTextColor="#191919"
      />
      </View>
      <View style={styles.OuterBox}>
      <FontAwesome5 style={styles.ico} name={'envelope'} size={20} solid />
      <TextInput
        style={styles.inputbox }
        placeholder={'Email'}
        placeholderTextColor="#191919"
        autoCapitalize='none'
        autoCorrect={false}
      />
      </View>
      <View style={styles.OuterBox}>
      <FontAwesome5 style={styles.ico} name={'calendar'} size={20} solid />
      <TextInput
        style={styles.inputbox }
        placeholder={'Date of Birth e.g DDMMYY'}
        placeholderTextColor="#191919"
      />
      </View>
      <View style={styles.OuterBox}>
      <FontAwesome5 style={styles.ico} name={'lock'} size={20} solid />
      <TextInput
        style={styles.inputbox }
        placeholder={'Password'}
        placeholderTextColor="#191919"
        secureTextEntry={true}
      />
      </View>
      <TouchableOpacity style={styles.getStarted}><Text style={styles.letsText}>Let's Get Started</Text></TouchableOpacity>
      </View>
    </SafeAreaView>
)

}

const styles = StyleSheet.create({ mainS:{ flex:1, backgroundColor:'black', padding:15, paddingTop: StatusBar.currentHeight, display:'flex', justifyContent:'flex-start', alignItems:'center', }, titleHead:{ textAlign:'center', fontSize:25, color:'white', fontWeight:'900', paddingBottom:30, }, desc:{ fontSize:15, textAlign:'left', color:'white', }, formStyle:{ marginVertical:30, },

inputbox:{
  backgroundColor:'#4c4c4c',
  padding:10,
  color:'#08A587',
  paddingLeft:40,
  marginBottom:10,
  width:360,
  borderWidth:2,
  borderColor:'#08A587',
  borderRadius:15,
},
ico:{
  color:'#08A587',
  marginTop:14,
  marginLeft:10,
  zIndex:2,
  position:'absolute'
},
getStarted:{
  paddingVertical:12, 
  backgroundColor:'#08A587', 
  borderRadius:15,    
  marginVertical:20,
},
letsText:{
  textAlign:'center',
  fontWeight:'600',
  fontSize:20,
  color:'white',
},

});

export default Signup;

johnf commented 1 year ago

@asadaa007 Is this still an issue? Did you follow the troubleshooting instructions? If so please comment and I'll assist