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

To help you get started, we’ve selected a few react-native-screens 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 / packages / bottom-tabs / src / views / ResourceSavingScene.tsx View on Github external
render() {
    if (screensEnabled?.()) {
      const { isVisible, ...rest } = this.props;
      // @ts-ignore
      return <Screen active={isVisible ? 1 : 0} {...rest} />;
    }

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

    return (
      <View
        style={[styles.container, style, { opacity: isVisible ? 1 : 0 }]}
        collapsable={false}
        removeClippedSubviews={
          // On iOS, set removeClippedSubviews to true only when not focused
          // This is an workaround for a bug where the clipped view never re-appears
          Platform.OS === 'ios' ? !isVisible : true
        }
github react-navigation / navigation-ex / packages / drawer / src / views / ResourceSavingScene.tsx View on Github external
render() {
    if (screensEnabled?.()) {
      const { isVisible, ...rest } = this.props;

      // @ts-ignore
      return <Screen active={isVisible ? 1 : 0} {...rest} />;
    }
    const { isVisible, children, style, ...rest } = this.props;

    return (
      <View
        style={[styles.container, style]}
        collapsable={false}
        removeClippedSubviews={
          // On iOS, set removeClippedSubviews to true only when not focused
          // This is an workaround for a bug where the clipped view never re-appears
          Platform.OS === 'ios' ? !isVisible : true
        }
github rodolfovilaca / AnimationsExperiments / App.js View on Github external
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',
github kmagiera / react-native-screens / Example / nativeNavigation.js View on Github external
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',
github kmagiera / react-native-screens / Example / nativeNavigation.js View on Github external
<Button
          onPress={() => this.props.navigation.goBack()}
          title="Go back"
        />
        <Button
          onPress={() => this.props.navigation.push('Push')}
          title="Push more"
        />
        <View style={styles.leftTop} />
        <View style={styles.bottomRight} />
      </View>
    );
  }
}

const AppStack = createNativeStackNavigator(
  {
    Some: {
      screen: SomeScreen,
      navigationOptions: () => ({
        title: 'Start',
        // headerBackTitle: null,
        headerStyle: {
          // backgroundColor: 'transparent',
        },
        headerTintColor: 'black',
        headerRight: () => (
          <Button onPress={() => alert('This is a button!')} title="Info" />
        ),
        // translucent: true,
        // largeTitle: true,
      }),
github react-navigation / stack / example / App.tsx View on Github external
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<any>;
  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' },
github rainbow-me / rainbow / src / App.js View on Github external
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) {
github react-navigation / navigation-ex / packages / stack / src / views / Stack / CardStack.tsx View on Github external
const MaybeScreen = ({
  enabled,
  active,
  ...rest
}: ViewProps & {
  enabled: boolean;
  active: number | Animated.Node<number>;
  children: React.ReactNode;
}) => {
  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
    AnimatedScreen =
      AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen);

    return <AnimatedScreen active={active} {...rest} />;
  }

  return <View {...rest} />;
};
github react-navigation / navigation-ex / packages / native-stack / src / navigators / createNativeStackNavigator.tsx View on Github external
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,
  });
github react-navigation / stack / src / views / Stack / Stack.tsx View on Github external
const MaybeScreen = ({
  enabled,
  active,
  ...rest
}: ViewProps & {
  enabled: boolean;
  active: number | Animated.Node<number>;
  children: React.ReactNode;
}) => {
  if (Platform.OS !== 'ios' && enabled && Screens.screensEnabled()) {
    AnimatedScreen =
      AnimatedScreen || Animated.createAnimatedComponent(Screens.NativeScreen);

    return <AnimatedScreen active={active} {...rest} />;
  }

  return <View {...rest} />;
};