How to use @react-navigation/stack - 10 common examples

// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const TabOneStack = createStackNavigator();

function TabOneNavigator() {
  return (
    
      
    
  );
}

const TabTwoStack = createStackNavigator();

function TabTwoNavigator() {
  return (
    
      
    
  );
}

// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const TabOneStack = createStackNavigator()

function TabOneNavigator() {
  return (
    
      
    
  )
}

const TabTwoStack = createStackNavigator()

function TabTwoNavigator() {
  return (
    
      
    
  )
}

return null
}

let Components: typeof RawComponents

// @ts-ignore
Components = mapValues(RawComponents, (SubComponents) =>
	mapValues(SubComponents, (Component: React.FC) => (props: any) => (
		<>
			
			
		
	)),
)

const CreateGroupStack = createStackNavigator()
export const CreateGroupNavigation: React.FC = () => {
	const [members, setMembers] = useState([] as any[])
	const setMember = (contact: any) => {
		if (members.find((member) => member.publicKey === contact.publicKey)) {
			return
		}
		setMembers([...members, contact])
	}
	const removeMember = (id: string) => {
		const filtered = members.filter((member) => member.publicKey !== id)
		if (filtered.length !== members.length) {
			setMembers(filtered)
		}
	}

	return (

MaterialBottomTabs: {
    title: 'Material Bottom Tabs',
    component: MaterialBottomTabs,
  },
  AuthFlow: {
    title: 'Auth Flow',
    component: AuthFlow,
  },
  CompatAPI: {
    title: 'Compat Layer',
    component: CompatAPI,
  },
};

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
const THEME_PERSISTENCE_KEY = 'THEME_TYPE';

Asset.loadAsync(StackAssets);

export default function App() {
  const containerRef = React.useRef();

  // To test deep linking on, run the following in the Terminal:
  // Android: adb shell am start -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/simple-stack"
  // iOS: xcrun simctl openurl booted exp://127.0.0.1:19000/--/simple-stack
  // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
  const { getInitialState } = useLinking(containerRef, {
    prefixes: LinkingPrefixes,
    config: {

tabBarIcon: ({ color }) => ,
        }}
      />
    
  );
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps['name']; color: string }) {
  return null;
}

// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const TabOneStack = createStackNavigator();

function TabOneNavigator() {
  return (
    
      
    
  );
}

const TabTwoStack = createStackNavigator();

function TabTwoNavigator() {

}: {
  colorScheme: ColorSchemeName
}) {
  return (
    
      
    
  )
}

// A root stack navigator is often used for displaying modals on top of all other content
// Read more here: https://reactnavigation.org/docs/modal
const Stack = createStackNavigator()

function RootNavigator() {
  return (
    
      
      
    
  )
}

import { Text, View } from 'react-native';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

function Demo() {
  return (
    
  );
}
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
        
          {() => (
             null}
            >
              
              
            
          )}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  navigation.setOptions({
    headerRight: () => (
      <button> setCount(c =&gt; c + 1)}
        title="Update count"
      /&gt;
    ),
  });

  return ;
}

const Stack = createStackNavigator();

function App() {
  return (
    
      
         ({
            headerTitle: props =&gt; ,
          })}
        /&gt;
      
    
  );
}</button>

import {Dimensions} from 'react-native';

const {width} = Dimensions.get('window');

import Home from '../screens/AppScreens/Home';
import Blank from '../screens/AppScreens/Blank';
import SideBar from '../screens/AppScreens/SideBar';
import Login from '../screens/AuthScreens/Login';
import AuthLoading from '../screens/AuthLoading';

type RootDrawerParamList = {
  root: undefined;
};

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

export default function App() {
  return (
    
      
        
      
    
  );
}

Push article
        
        <button mode="outlined"> navigation.goBack()}
          style={styles.button}
        &gt;
          Go back
        </button>
      
      
    
  );
};

const SimpleStack = createStackNavigator();

type Props = Partial&gt; &amp; {
  navigation: StackNavigationProp;
};

export default function SimpleStackScreen({ navigation, ...rest }: Props) {
  navigation.setOptions({
    headerShown: false,
  });

  return (
    
       ({