How to use the @react-navigation/drawer.createDrawerNavigator function in @react-navigation/drawer

To help you get started, we’ve selected a few @react-navigation/drawer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github react-navigation / navigation-ex / example / src / index.tsx View on Github external
},
  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,
github GeekyAnts / ReactNative-Redux-TypeScript-Boilerplate / src / navigation / AppNavigation.tsx View on Github external
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 (
    
      
        
      
    
  );
}
github react-navigation / react-navigation.github.io / website / static / examples / next / drawer-based-navigation.js View on Github external
onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    
  );
}

function NotificationsScreen({ navigation }) {
  return (
github callstack / react-native-paper / example / src / index.tsx View on Github external
const DrawerContent = () => {
  return (
    
      {preferences => (
        
      )}
    
  );
};

const Drawer = createDrawerNavigator<{ Home: undefined }>();

export default function PaperExample() {
  useKeepAwake();

  const [isReady, setIsReady] = React.useState(false);
  const [initialState, setInitialState] = React.useState<
    InitialState | undefined
  >();

  const [theme, setTheme] = React.useState(DefaultTheme);
  const [rtl, setRtl] = React.useState(I18nManager.isRTL);

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);

@react-navigation/drawer

Integration for the drawer component from react-native-drawer-layout

MIT
Latest version published 10 days ago

Package Health Score

98 / 100
Full package analysis

Popular @react-navigation/drawer functions