Skip to content

Instantly share code, notes, and snippets.

@lockieluke
Last active Sep 15, 2021
Embed
What would you like to do?
React Navigation: Large title bug
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { Button, StyleSheet } from 'react-native';
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useDarkMode } from 'react-native-dynamic';
import Home from './screens/Home';
const Stack = createNativeStackNavigator();
export default function App() {
const isDarkMode = useDarkMode();
return (
<NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
<Stack.Navigator>
<Stack.Screen name={"Home"} options={{
headerLargeTitle: true,
headerRight: () => (
<Button onPress={() => alert("Hello")} title="Settings"></Button>
)
}} component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { useDarkMode } from 'react-native-dynamic'
export default function Device(props: {deviceName: string}) {
const isDarkMode = useDarkMode();
const styles = StyleSheet.create({
container: {
backgroundColor: 'lightgrey',
height: 100,
margin: 20,
borderRadius: 20
},
deviceName: {
color: isDarkMode ? 'white' : 'black',
fontWeight: 'bold',
fontSize: 20
}
})
return (
<View style={styles.container}>
<Text style={styles.deviceName}>{props.deviceName}</Text>
</View>
)
}
import React, { useRef } from 'react';
import { FlatList } from 'react-native';
import Device from '../../components/Device';
export default function Home() {
const deviceListRef = useRef<FlatList>(null);
deviceListRef.current?.scrollToIndex({
index: 0,
animated: true
});
return (
<FlatList ref={deviceListRef} renderItem={({item}) => (
<Device deviceName={item.deviceName} />
)} data={[{
deviceName: "Windows",
id: "key-0"
}]} keyExtractor={item => item.id} />
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment