สร้าง NavigationBar ง่าย ๆ ด้วย React Native กันเถอะ

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const WordTest = () => {
  const word = 'Hello, World!'; // Replace with your desired word

  return (
     <View style={styles.container}>
       <Text style={styles.word}>{word}</Text>
     </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  word: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default WordTest;

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

const NavBar = ({ state, descriptors, navigation }) => {
  return (
     <View style={styles.container}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.title || route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
           <TouchableOpacity
              key={route.key}
              onPress={onPress}
              style={[styles.button, isFocused && styles.activeButton]}
           >
             <Text style={styles.buttonText}>{label}</Text>
           </TouchableOpacity>
        );
    })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    height: 50,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 10,
    backgroundColor: 'lightblue',
  },
  activeButton: {
    backgroundColor: 'yellow',
  },
  buttonText: {
    fontSize: 16,
  },
});

export default NavBar;

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Timer from './src/Timer';
import wordtest from './src/wordtest';
import NavBar from './src/NavBar';

const Tab = createBottomTabNavigator();

const App = () => {
  const [activeScreen, setActiveScreen] = useState('timer');

  return (
    <NavigationContainer>
       <Tab.Navigator tabBar={(props) => <NavBar {...props} activeScreen={activeScreen} setActiveScreen={setActiveScreen} />}>
         <Tab.Screen name="Timer" component={Timer} />
         <Tab.Screen name="Result" component={wordtest} />
       </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;