React Native general

01react-native-general

cmp adminstration -> install -g react-native-cli ->  react native coment line tools "for create new project and testing project in android studio"
react-native init cars -> (react-native referans to react-native tools,init to show that we create new project , cars project name)
Imgage ucun apiden cekilerken => <Image style={{height:300,flex:1,width:0}} source={{uri:brand.model[0].image}} /> / styles butun kaplayici divi tutmaq ucundur
iconlar ucun -> https://feathericons.com/ https://www.flaticon.com/ https://icons8.com/

02react-native-general-classIBA

keyboardType={"numeric"} -> TextInput a verilir
Dimensions -? ekran olculerini saxlayir -> console.log(Dimensions.get("window"));

03React-native-styling.js

/*teze telefonlardaki çentiye goredir*/SafeAreaView
Styling-Method 1 => 
declere =>  const styles = { textStyling:{fontSize:22,},}
usage   =>  <Text style={styles.textStyling}>Cars</Text>
with pakkage => https://styled-system.com/api#flexbox and https://styled-components.com/docs
//Image usage
api den image url => <Image style={{height:300,flex:1,width:0}} source={{uri:brand.model[0].image}} />  
//apiler
url phoned de brozerde acma 'Linking.openURL()' => <Button buttonPress={()=>{Linking.openURL(brand.model[0].url);}}/>
//button
<Button title="ADD" color="red" onPress={addClickHandler} /> -> title icindeki yazini , color bacfround rengini gosterir
//TextInput  onChangeText => valuesiz isleyir ,asagida ki kimi stateni guncelleyis
<TextInput value={newGoalText} onChangeText={text =>setNewGoalText(text)} style={styles.input} placeholder="Write goal text"/>
  keyboardType={"numeric"} =>keybordun typini mueyyenlesdirir
//FlatList-> burda item goals datamizin icindeki ayri ayri elementlerdir(avtomatik bu ad verilik),(ayri ayri datala iki hisseye bolnub,tex ve uid)
<FlatList data={goals}  renderItem={({item})=>( <View style={styles.goal}>  <Text>{item.text}</Text> </View> )} keyExtractor={({uid})=>uid}/>
/* meselen nese yazilandan sora keyboardi baglamaq ucundur */ Keyboard.dismiss(); 
//TouchableOpacity 
<TouchableOpacity activeOpacity={0.6}  onLongPress={()=>deleteGoal(item.uid)} > </TouchableOpacity> ->  activeOpacity={0.1}-> active olandaki opasitisi verilir

04react-navigatioandSvn.js

https://reactnavigation.org/docs/getting-started
npm install @react-navigation/native 
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

1 ci hello example => https://reactnavigation.org/docs/hello-react-navigation/

for svg => first install https://github.com/react-native-community/react-native-svg#automatically
then =? add package.json that => "svgr": "svgr ./src/icons -d ./src/component/icons --native --icon --svg-props 'width=24,height=24'"
then =? npm add -D @svgr/cli =? it is that package =? https://react-svgr.com/docs/cli/
then =? bu npm run svgr isleme se bunu => svgr ./src/icons -d ./src/components/icons --native --icon --svg-props "width=24,height=24,className="