Created
June 5, 2024 08:43
-
-
Save mkhuda/5b0e1d900199f36cb489d0386a3efa98 to your computer and use it in GitHub Desktop.
with onLayout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react'; | |
| import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'; | |
| const GameItem = () => { | |
| const [bottomContainerHeight, setBottomContainerHeight] = useState(0); | |
| return ( | |
| <View style={styles.container}> | |
| <Text style={styles.headerText}>Game section bang</Text> | |
| <Image | |
| style={styles.image} | |
| source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} | |
| /> | |
| <View | |
| style={styles.bottomContainer} | |
| onLayout={(event) => { | |
| const { height } = event.nativeEvent.layout; | |
| setBottomContainerHeight(height); | |
| }} | |
| > | |
| <TouchableOpacity | |
| style={[ | |
| styles.playButton, | |
| { top: -(bottomContainerHeight / 2) } // Adjust this value as needed | |
| ]} | |
| onPress={() => console.log('play')} | |
| > | |
| <Text style={styles.playButtonText}>PLAY</Text> | |
| </TouchableOpacity> | |
| <Text style={styles.titleText}>Numbers Blitz</Text> | |
| <Text style={styles.descriptionText}> | |
| Jago berhitung? Yuk buktikan dengan menemukan nilai dari variabel tersembunyi! | |
| </Text> | |
| </View> | |
| </View> | |
| ); | |
| }; | |
| const styles = StyleSheet.create({ | |
| container: { | |
| backgroundColor: 'darkblue', | |
| borderRadius: 40, | |
| alignItems: 'center', | |
| paddingBottom: 20, | |
| marginBottom: 20, | |
| }, | |
| headerText: { | |
| color: 'red', | |
| marginTop: 20, | |
| }, | |
| image: { | |
| width: 100, | |
| height: 100, | |
| alignSelf: 'center', | |
| marginTop: 10, | |
| }, | |
| bottomContainer: { | |
| backgroundColor: 'plum', | |
| borderRadius: 40, | |
| padding: 20, | |
| width: '100%', | |
| alignItems: 'center', | |
| marginTop: -20, // Adjust this to position the bottom container correctly | |
| }, | |
| playButton: { | |
| backgroundColor: 'darkblue', | |
| borderColor: 'plum', | |
| borderWidth: 2, | |
| borderRadius: 25, | |
| paddingVertical: 10, | |
| paddingHorizontal: 30, | |
| position: 'absolute', | |
| zIndex: 1, | |
| }, | |
| playButtonText: { | |
| color: 'white', | |
| fontSize: 16, | |
| fontWeight: 'bold', | |
| }, | |
| titleText: { | |
| marginTop: 30, | |
| fontSize: 20, | |
| fontWeight: 'bold', | |
| color: '#fff', | |
| textAlign: 'center', | |
| }, | |
| descriptionText: { | |
| fontSize: 16, | |
| color: '#fff', | |
| textAlign: 'center', | |
| marginTop: 10, | |
| }, | |
| }); | |
| export default GameItem; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment