Ọlá
@thegodtune.bsky.social
flexBasis
sets size along the primary axis
if primary axis is horizontal, flexBasis would be the width,
if primary axis is vertical, flexBasis would be the height
sets size along the primary axis
if primary axis is horizontal, flexBasis would be the width,
if primary axis is vertical, flexBasis would be the height
January 17, 2024 at 5:29 PM
flexBasis
sets size along the primary axis
if primary axis is horizontal, flexBasis would be the width,
if primary axis is vertical, flexBasis would be the height
sets size along the primary axis
if primary axis is horizontal, flexBasis would be the width,
if primary axis is vertical, flexBasis would be the height
alignContent
determines the alignment of the entire content
different from alignItems because that determines the alignment of the items within each line.
determines the alignment of the entire content
different from alignItems because that determines the alignment of the items within each line.
January 17, 2024 at 5:28 PM
alignContent
determines the alignment of the entire content
different from alignItems because that determines the alignment of the items within each line.
determines the alignment of the entire content
different from alignItems because that determines the alignment of the items within each line.
we can also align a singular item individually using alignSelf
alignSelf has the properties flex (start, end, center), auto, baseline, center, stretch
alignSelf has the properties flex (start, end, center), auto, baseline, center, stretch
January 12, 2024 at 3:25 PM
we can also align a singular item individually using alignSelf
alignSelf has the properties flex (start, end, center), auto, baseline, center, stretch
alignSelf has the properties flex (start, end, center), auto, baseline, center, stretch
To align items along the secondary axis we use the alignItems property
alignItems has properties flex (start,end), center, baseline, stretch
The secondary axis is the other axis than the main axis, if the main axis is vertical (column), then the secondary axis is horizontal (row)
alignItems has properties flex (start,end), center, baseline, stretch
The secondary axis is the other axis than the main axis, if the main axis is vertical (column), then the secondary axis is horizontal (row)
January 12, 2024 at 3:19 PM
To align items along the secondary axis we use the alignItems property
alignItems has properties flex (start,end), center, baseline, stretch
The secondary axis is the other axis than the main axis, if the main axis is vertical (column), then the secondary axis is horizontal (row)
alignItems has properties flex (start,end), center, baseline, stretch
The secondary axis is the other axis than the main axis, if the main axis is vertical (column), then the secondary axis is horizontal (row)
flexDirection as row, sets main axis to be horizontal
flexDirection as column, sets main axis to be vertical
flexDirection as column, sets main axis to be vertical
January 12, 2024 at 2:00 PM
flexDirection as row, sets main axis to be horizontal
flexDirection as column, sets main axis to be vertical
flexDirection as column, sets main axis to be vertical
Aligning items in the container
To align the items in the container, we use justifyContent property
With the options center, flex (start, end), space(around, between, evenly)
It aligns the items along the main axis
The main axis is determined by flexDirection property
To align the items in the container, we use justifyContent property
With the options center, flex (start, end), space(around, between, evenly)
It aligns the items along the main axis
The main axis is determined by flexDirection property
January 12, 2024 at 1:58 PM
Aligning items in the container
To align the items in the container, we use justifyContent property
With the options center, flex (start, end), space(around, between, evenly)
It aligns the items along the main axis
The main axis is determined by flexDirection property
To align the items in the container, we use justifyContent property
With the options center, flex (start, end), space(around, between, evenly)
It aligns the items along the main axis
The main axis is determined by flexDirection property
To arrange flex elements (or children) horizontally [it is vertical by default] we use a prop called flexDirection, and we set it to row or row-reverse
January 12, 2024 at 1:51 PM
To arrange flex elements (or children) horizontally [it is vertical by default] we use a prop called flexDirection, and we set it to row or row-reverse
fixed sizes
<View>
<View style={{ width: 200 height: 100, backgroundColor: "red" }} />
<View style={{ width: 200 height: 300, backgroundColor: "green" }}/>
</View>
<View>
<View style={{ width: 200 height: 100, backgroundColor: "red" }} />
<View style={{ width: 200 height: 300, backgroundColor: "green" }}/>
</View>
January 7, 2024 at 10:55 PM
fixed sizes
<View>
<View style={{ width: 200 height: 100, backgroundColor: "red" }} />
<View style={{ width: 200 height: 300, backgroundColor: "green" }}/>
</View>
<View>
<View style={{ width: 200 height: 100, backgroundColor: "red" }} />
<View style={{ width: 200 height: 300, backgroundColor: "green" }}/>
</View>
Flex | Flexbox
With Flex we can easily build layouts that are consistent across different screen sizes
components could either be given flex ratios or fixed sizes
<View>
<View style={{ flex: 0.5, backgroundColor: "red" }} />
<View style={{ flex: 0.25, backgroundColor: "green" }}/>
</View>
With Flex we can easily build layouts that are consistent across different screen sizes
components could either be given flex ratios or fixed sizes
<View>
<View style={{ flex: 0.5, backgroundColor: "red" }} />
<View style={{ flex: 0.25, backgroundColor: "green" }}/>
</View>
January 7, 2024 at 10:53 PM
Flex | Flexbox
With Flex we can easily build layouts that are consistent across different screen sizes
components could either be given flex ratios or fixed sizes
<View>
<View style={{ flex: 0.5, backgroundColor: "red" }} />
<View style={{ flex: 0.25, backgroundColor: "green" }}/>
</View>
With Flex we can easily build layouts that are consistent across different screen sizes
components could either be given flex ratios or fixed sizes
<View>
<View style={{ flex: 0.5, backgroundColor: "red" }} />
<View style={{ flex: 0.25, backgroundColor: "green" }}/>
</View>
Component Dimensions
import { useDeviceOrientation } from "@react-native-community/hooks";
This hook is used to identify the present device orientation.
useDeviceOrientation()
import { useDeviceOrientation } from "@react-native-community/hooks";
This hook is used to identify the present device orientation.
useDeviceOrientation()
January 6, 2024 at 10:38 PM
Component Dimensions
import { useDeviceOrientation } from "@react-native-community/hooks";
This hook is used to identify the present device orientation.
useDeviceOrientation()
import { useDeviceOrientation } from "@react-native-community/hooks";
This hook is used to identify the present device orientation.
useDeviceOrientation()
Platform Specific Code
we use the Platform Class
import it and use the OS property.
Platform.OS
we use the Platform Class
import it and use the OS property.
Platform.OS
January 6, 2024 at 9:29 PM
Platform Specific Code
we use the Platform Class
import it and use the OS property.
Platform.OS
we use the Platform Class
import it and use the OS property.
Platform.OS
const newStyler = stylesheet.create({
button: {
backgroundColor: "#000"
}
})
button: {
backgroundColor: "#000"
}
})
January 6, 2024 at 6:48 PM
const newStyler = stylesheet.create({
button: {
backgroundColor: "#000"
}
})
button: {
backgroundColor: "#000"
}
})
Stylesheet API!
A component can use multiple style objects
<SafeAreaProvider style={[styles.container, newStyler.button]}>
...
<SafeAreaProvider/>
const styles = stylesheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
A component can use multiple style objects
<SafeAreaProvider style={[styles.container, newStyler.button]}>
...
<SafeAreaProvider/>
const styles = stylesheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
January 6, 2024 at 6:48 PM
Stylesheet API!
A component can use multiple style objects
<SafeAreaProvider style={[styles.container, newStyler.button]}>
...
<SafeAreaProvider/>
const styles = stylesheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
A component can use multiple style objects
<SafeAreaProvider style={[styles.container, newStyler.button]}>
...
<SafeAreaProvider/>
const styles = stylesheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
-Alert.alert-
accepts:
1. title
2. message
3. array of options-
accepts:
1. text
2. onPress method
accepts:
1. title
2. message
3. array of options-
accepts:
1. text
2. onPress method
January 6, 2024 at 6:39 PM
-Alert.alert-
accepts:
1. title
2. message
3. array of options-
accepts:
1. text
2. onPress method
accepts:
1. title
2. message
3. array of options-
accepts:
1. text
2. onPress method
Alert.prompt("My title", "My Message", (text) => {
console.log(text);;
});
console.log(text);;
});
January 6, 2024 at 6:39 PM
Alert.prompt("My title", "My Message", (text) => {
console.log(text);;
});
console.log(text);;
});
Alerts!
we can import alert API from react-native
it has 2 methods, prompt & alert
-Alert.prompt- (only works on iOS so far)
accepts:
1. title
2. message
3. text -
this is the text that the user enters into the console
and it accepts a callback to perform actions on that text
we can import alert API from react-native
it has 2 methods, prompt & alert
-Alert.prompt- (only works on iOS so far)
accepts:
1. title
2. message
3. text -
this is the text that the user enters into the console
and it accepts a callback to perform actions on that text
January 6, 2024 at 6:34 PM
Alerts!
we can import alert API from react-native
it has 2 methods, prompt & alert
-Alert.prompt- (only works on iOS so far)
accepts:
1. title
2. message
3. text -
this is the text that the user enters into the console
and it accepts a callback to perform actions on that text
we can import alert API from react-native
it has 2 methods, prompt & alert
-Alert.prompt- (only works on iOS so far)
accepts:
1. title
2. message
3. text -
this is the text that the user enters into the console
and it accepts a callback to perform actions on that text
TouchableNativeFeedback now works on iOS.
Darn! this tutorial is OLD
Darn! this tutorial is OLD
January 6, 2024 at 6:11 PM
TouchableNativeFeedback now works on iOS.
Darn! this tutorial is OLD
Darn! this tutorial is OLD
TouchableWithoutFeedback
TouchableHighlight
TouchableOpacity
are the known 'cross-platform' touchable components
TouchableHighlight
TouchableOpacity
are the known 'cross-platform' touchable components
January 6, 2024 at 6:10 PM
TouchableWithoutFeedback
TouchableHighlight
TouchableOpacity
are the known 'cross-platform' touchable components
TouchableHighlight
TouchableOpacity
are the known 'cross-platform' touchable components
To make view behave correct on iOS and Android, use this
docs.expo.dev/develop/user...
docs.expo.dev/develop/user...
January 6, 2024 at 6:07 PM
To make view behave correct on iOS and Android, use this
docs.expo.dev/develop/user...
docs.expo.dev/develop/user...
It was actually more or less obvious, we where just too caught up in the frenzy, there's no substance to it. Every sustained tech bubble had obvious services they rendered, nft is just too vague.
September 22, 2023 at 10:11 AM
It was actually more or less obvious, we where just too caught up in the frenzy, there's no substance to it. Every sustained tech bubble had obvious services they rendered, nft is just too vague.
I usually swing between school_id and schoolId.
September 22, 2023 at 8:55 AM
I usually swing between school_id and schoolId.
userID is just unbelievable.
September 20, 2023 at 12:20 PM
userID is just unbelievable.