How to use react-native-screens - 10 common examples

render() {
    if (screensEnabled?.()) {
      const { isVisible, ...rest } = this.props;
      // @ts-ignore
      return ;
    }

    const { isVisible, children, style, ...rest } = this.props;

    return (

render() {
    if (screensEnabled?.()) {
      const { isVisible, ...rest } = this.props;

      // @ts-ignore
      return ;
    }
    const { isVisible, children, style, ...rest } = this.props;

    return (

import {useScreens} from 'react-native-screens';
import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';
import {createAppContainer} from 'react-navigation';
import Home from './src/screens/home';
import InfiniteScrollExample from './src/screens/infiniteScroll';
import SpeedScreen from './src/screens/speed';

useScreens();

const appStack = createNativeStackNavigator(
  {
    Home: {
      screen: Home,
    },
    InfiniteScroll: {
      screen: InfiniteScrollExample,
    },
    SpeedScreen: {
      screen: SpeedScreen,
    },
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
    // transparentCard: true,
    // mode: 'modal',

headerTintColor: 'black',
        // header: null,
        // translucent: true,
        // gestureEnabled: false,
      },
    },
  },
  {
    initialRouteName: 'Some',
    // headerMode: 'none',
    // transparentCard: true,
    // mode: 'modal',
  }
);

const App = createNativeStackNavigator(
  {
    Root: { screen: AppStack },
    Modal: PushScreen,
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

const styles = StyleSheet.create({
  screen: {
    ...StyleSheet.absoluteFillObject,
    paddingTop: 200,
    flex: 1,
    backgroundColor: 'white',

<button> this.props.navigation.goBack()}
          title="Go back"
        /&gt;
        </button><button> this.props.navigation.push('Push')}
          title="Push more"
        /&gt;
        </button><button> alert('This is a button!')} title="Info" /&gt;
        ),
        // translucent: true,
        // largeTitle: true,
      }),</button>

import StackWithDrawer from './src/StackWithDrawer';
import StackWithInput from './src/StackWithInput';
import HeaderPreset from './src/HeaderPreset';
import {
  HeaderBackgroundDefault,
  HeaderBackgroundFade,
} from './src/HeaderBackgrounds';
import DragLimitedToModal from './src/DragLimitedToModal';
import StackAnimationConsumerStack from './src/StackAnimationConsumerStack';

// Comment the following two lines to stop using react-native-screens
// eslint-disable-next-line import/no-unresolved
import { useScreens } from 'react-native-screens';

// eslint-disable-next-line react-hooks/rules-of-hooks
useScreens(true);

// Change `false` to `true` to force RTL. Requires closing and re-opening
// your app after you first load it with this option enabled.
I18nManager.forceRTL(false);

type Item = {
  component: React.ComponentType;
  title: string;
  routeName: string;
};

const data: Item[] = [
  { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
  { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
  { component: RevealStack, title: 'Reveal Preset', routeName: 'Reveal' },
  { component: ImageStack, title: 'Image', routeName: 'ImageStack' },

withWalletConnectConnections,
  withWalletConnectOnSessionRequest,
} from './hoc';
import { registerTokenRefreshListener, saveFCMToken } from './model/firebase';
import * as keychain from './model/keychain';
import { Navigation } from './navigation';
import store from './redux/store';
import { requestsForTopic } from './redux/requests';
import Routes from './screens/Routes';
import { parseQueryParams } from './utils';

if (process.env.NODE_ENV === 'development') {
  console.disableYellowBox = true;
}

useScreens(false);

class App extends Component {
  static propTypes = {
    appInitTimestamp: PropTypes.number,
    requestsForTopic: PropTypes.func,
    sortedWalletConnectors: PropTypes.arrayOf(PropTypes.object),
    walletConnectClearTimestamp: PropTypes.func,
    walletConnectOnSessionRequest: PropTypes.func,
    walletConnectUpdateTimestamp: PropTypes.func,
  };

  state = { appState: AppState.currentState }

  handleOpenLinkingURL = ({ url }) => {
    Linking.canOpenURL(url).then((supported) => {
      if (supported) {

const MaybeScreen = ({
  enabled,
  active,
  ...rest
}: ViewProps & {
  enabled: boolean;
  active: number | Animated.Node;
  children: React.ReactNode;
}) => {
  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
    AnimatedScreen =
      AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen);

    return ;
  }

  return

function NativeStackNavigator(props: NativeStackNavigatorProps) {
  if (!screensEnabled()) {
    throw new Error(
      'Native stack is only available if React Native Screens is enabled.'
    );
  }

  const { initialRouteName, children, screenOptions, ...rest } = props;
  const { state, descriptors, navigation } = useNavigationBuilder<
    StackNavigationState,
    StackRouterOptions,
    NativeStackNavigationOptions,
    {}
  >(StackRouter, {
    initialRouteName,
    children,
    screenOptions,
  });

const MaybeScreen = ({
  enabled,
  active,
  ...rest
}: ViewProps & {
  enabled: boolean;
  active: number | Animated.Node;
  children: React.ReactNode;
}) => {
  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
    AnimatedScreen =
      AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen);

    return ;
  }

  return