Compare commits

..

5 Commits

Author SHA1 Message Date
Satyajit Sahoo
aa77f0618b chore: publish
- @react-navigation/bottom-tabs@6.0.0-next.13
 - @react-navigation/devtools@6.0.0-next.10
 - @react-navigation/drawer@6.0.0-next.12
 - @react-navigation/elements@1.0.0-next.12
 - @react-navigation/native-stack@6.0.0-next.2
 - @react-navigation/stack@6.0.0-next.20
2021-05-25 11:41:39 +02:00
Satyajit Sahoo
a5520d7ef1 fix: make react-native-flipper optional in devtools 2021-05-25 11:41:21 +02:00
Satyajit Sahoo
0c1a061a04 chore: minor tweaks 2021-05-24 21:24:57 +02:00
Satyajit Sahoo
d5f5521d5d chore: publish
- @react-navigation/stack@6.0.0-next.19
2021-05-24 15:10:52 +02:00
Satyajit Sahoo
c90bff08d5 fix: make transparent modal work with modal presentation 2021-05-24 15:10:28 +02:00
25 changed files with 170 additions and 83 deletions

View File

@@ -15,9 +15,11 @@ import {
useCardAnimation,
} from '@react-navigation/stack';
import Article from '../Shared/Article';
import NewsFeed from '../Shared/NewsFeed';
type TransparentStackParams = {
Article: { author: string };
NewsFeed: undefined;
Dialog: undefined;
};
@@ -37,6 +39,13 @@ const ArticleScreen = ({
>
Show Dialog
</Button>
<Button
mode="contained"
onPress={() => navigation.push('NewsFeed')}
style={styles.button}
>
Push NewsFeed
</Button>
<Button
mode="outlined"
onPress={() => navigation.goBack()}
@@ -53,6 +62,32 @@ const ArticleScreen = ({
);
};
const NewsFeedScreen = ({
navigation,
}: StackScreenProps<TransparentStackParams, 'NewsFeed'>) => {
return (
<ScrollView>
<View style={styles.buttons}>
<Button
mode="contained"
onPress={() => navigation.push('Dialog')}
style={styles.button}
>
Show Dialog
</Button>
<Button
mode="outlined"
onPress={() => navigation.goBack()}
style={styles.button}
>
Go back
</Button>
</View>
<NewsFeed scrollEnabled={scrollEnabled} />
</ScrollView>
);
};
const DialogScreen = ({
navigation,
}: StackScreenProps<TransparentStackParams>) => {
@@ -116,6 +151,11 @@ export default function TransparentStackScreen({ navigation }: Props) {
component={ArticleScreen}
initialParams={{ author: 'Gandalf' }}
/>
<TransparentStack.Screen
name="NewsFeed"
component={NewsFeedScreen}
options={{ presentation: 'modal' }}
/>
<TransparentStack.Screen
name="Dialog"
component={DialogScreen}
@@ -131,6 +171,7 @@ export default function TransparentStackScreen({ navigation }: Props) {
const styles = StyleSheet.create({
buttons: {
flexDirection: 'row',
flexWrap: 'wrap',
padding: 8,
},
button: {

View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [6.0.0-next.13](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.12...@react-navigation/bottom-tabs@6.0.0-next.13) (2021-05-25)
**Note:** Version bump only for package @react-navigation/bottom-tabs
# [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.11...@react-navigation/bottom-tabs@6.0.0-next.12) (2021-05-23)
**Note:** Version bump only for package @react-navigation/bottom-tabs

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/bottom-tabs",
"description": "Bottom tab navigator following iOS design guidelines",
"version": "6.0.0-next.12",
"version": "6.0.0-next.13",
"keywords": [
"react-native-component",
"react-component",
@@ -36,7 +36,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/elements": "^1.0.0-next.11",
"@react-navigation/elements": "^1.0.0-next.12",
"color": "^3.1.3",
"warn-once": "^0.1.0"
},

View File

@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [6.0.0-next.10](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.9...@react-navigation/devtools@6.0.0-next.10) (2021-05-25)
### Bug Fixes
* make react-native-flipper optional in devtools ([a5520d7](https://github.com/react-navigation/react-navigation/commit/a5520d7ef1f0980aa869ba2bdf92194d3e3a6b96))
# [6.0.0-next.9](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.8...@react-navigation/devtools@6.0.0-next.9) (2021-05-23)

View File

@@ -3,31 +3,3 @@
Developer tools for React Navigation.
Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/6.x/devtools).
## Installation
Open a Terminal in your project's folder and run,
```sh
yarn add @react-navigation/devtools
```
## Usage
For redux dev tools extension integration, you can pass a ref to the container:
```js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';
export default function App() {
const navigationRef = React.useRef();
useReduxDevToolsExtension(navigationRef);
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
```

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/devtools",
"description": "Developer tools for React Navigation",
"version": "6.0.0-next.9",
"version": "6.0.0-next.10",
"keywords": [
"react",
"react-native",
@@ -51,8 +51,7 @@
"typescript": "^4.2.3"
},
"peerDependencies": {
"react": "*",
"react-native-flipper": "*"
"react": "*"
},
"react-native-builder-bob": {
"source": "src",

View File

@@ -1,12 +1,28 @@
import * as React from 'react';
import { addPlugin, Flipper } from 'react-native-flipper';
import type { NavigationContainerRef } from '@react-navigation/core';
import type { Flipper } from 'react-native-flipper';
import { nanoid } from 'nanoid/non-secure';
import useDevToolsBase from './useDevToolsBase';
let FlipperModule: typeof import('react-native-flipper') | undefined;
try {
FlipperModule = require('react-native-flipper');
} catch (e) {
// Do nothing
}
export default function useFlipper(
ref: React.RefObject<NavigationContainerRef<any>>
) {
if (FlipperModule == null) {
throw new Error(
"Please install the 'react-native-flipper' package in your project to use Flipper integration for React Navigation."
);
}
const { addPlugin } = FlipperModule;
const connectionRef = React.useRef<Flipper.FlipperConnection>();
const { resetRoot } = useDevToolsBase(ref, (...args) => {
@@ -91,5 +107,5 @@ export default function useFlipper(
return false;
},
});
}, [ref, resetRoot]);
}, [addPlugin, ref, resetRoot]);
}

View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [6.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.11...@react-navigation/drawer@6.0.0-next.12) (2021-05-25)
**Note:** Version bump only for package @react-navigation/drawer
# [6.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.10...@react-navigation/drawer@6.0.0-next.11) (2021-05-23)
**Note:** Version bump only for package @react-navigation/drawer

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/drawer",
"description": "Drawer navigator component with animated transitions and gesturess",
"version": "6.0.0-next.11",
"version": "6.0.0-next.12",
"keywords": [
"react-native-component",
"react-component",
@@ -41,7 +41,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/elements": "^1.0.0-next.11",
"@react-navigation/elements": "^1.0.0-next.12",
"color": "^3.1.3",
"warn-once": "^0.1.0"
},

View File

@@ -523,7 +523,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
: multiply(this.drawerWidth, -1);
// FIXME: Currently hitSlop is broken when on Android when drawer is on right
// https://github.com/kmagiera/react-native-gesture-handler/issues/569
// https://github.com/software-mansion/react-native-gesture-handler/issues/569
const hitSlop = isRight
? // Extend hitSlop to the side of the screen when drawer is closed
// This lets the user drag the drawer from the side of the screen

View File

@@ -133,7 +133,7 @@ export default function Drawer({
};
// FIXME: Currently hitSlop is broken when on Android when drawer is on right
// https://github.com/kmagiera/react-native-gesture-handler/issues/569
// https://github.com/software-mansion/react-native-gesture-handler/issues/569
const hitSlop = isRight
? // Extend hitSlop to the side of the screen when drawer is closed
// This lets the user drag the drawer from the side of the screen

View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.0.0-next.12](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.11...@react-navigation/elements@1.0.0-next.12) (2021-05-25)
**Note:** Version bump only for package @react-navigation/elements
# [1.0.0-next.11](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.10...@react-navigation/elements@1.0.0-next.11) (2021-05-23)
**Note:** Version bump only for package @react-navigation/elements

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/elements",
"description": "UI Components for React Navigation",
"version": "1.0.0-next.11",
"version": "1.0.0-next.12",
"keywords": [
"react-native",
"react-navigation",

View File

@@ -11,7 +11,7 @@ export type Layout = { width: number; height: number };
export type HeaderOptions = {
/**
* String or a function that returns a React Element to be used by the header.
* Defaults to scene `title`.
* Defaults to screen `title` or route name.
*
* It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
* The title string is passed in `children`.

View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [6.0.0-next.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.1...@react-navigation/native-stack@6.0.0-next.2) (2021-05-25)
**Note:** Version bump only for package @react-navigation/native-stack
# [6.0.0-next.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@5.0.5...@react-navigation/native-stack@6.0.0-next.1) (2021-05-23)

View File

@@ -1,5 +1,5 @@
# `@react-navigation/native-stack`
Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood.
Stack navigator for React Native using native primitives for navigation. Uses [`react-native-screens`](https://github.com/software-mansion/react-native-screens) under the hood.
Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/native-stack-navigator.html).

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/native-stack",
"description": "Native stack navigator using react-native-screens",
"version": "6.0.0-next.1",
"version": "6.0.0-next.2",
"keywords": [
"react-native-component",
"react-component",
@@ -41,7 +41,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/elements": "^1.0.0-next.11",
"@react-navigation/elements": "^1.0.0-next.12",
"warn-once": "^0.1.0"
},
"devDependencies": {

View File

@@ -94,10 +94,10 @@ export type NativeStackNavigationOptions = {
*
* @platform ios
*/
headerBackTitleStyle?: {
headerBackTitleStyle?: StyleProp<{
fontFamily?: string;
fontSize?: number;
};
}>;
/**
* Image to display in the header as the icon in the back button.
* Defaults to back icon image for the platform
@@ -197,10 +197,12 @@ export type NativeStackNavigationOptions = {
headerRight?: (props: { tintColor?: string }) => React.ReactNode;
/**
* String or a function that returns a React Element to be used by the header.
* Defaults to scene `title`.
* Defaults to screen `title` or route name.
*
* It receives `tintColor` and`children` in the options object as an argument.
* When a function is passed, it receives `tintColor` and`children` in the options object as an argument.
* The title string is passed in `children`.
*
* Note that if you render a custom element by passing a function, animations for the title won't work.
*/
headerTitle?:
| string
@@ -227,16 +229,6 @@ export type NativeStackNavigationOptions = {
fontWeight?: string;
color?: string;
}>;
/**
* Whether there should be additional top inset to account for translucent status bar.
* If you don't have a translucent status bar, you can disable this by passing `false`
*
* Only supported on Android. Insets are always applied on iOS because the
* header cannot be opaque.
*
* @platform android
*/
headerTopInsetEnabled?: boolean;
/**
* Options to render a native search bar on iOS.
*
@@ -245,7 +237,7 @@ export type NativeStackNavigationOptions = {
headerSearchBar?: SearchBarProps;
/**
* Sets the status bar animation (similar to the `StatusBar` component).
* Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
* Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
*
* Only supported on iOS.
*
@@ -263,7 +255,7 @@ export type NativeStackNavigationOptions = {
statusBarHidden?: boolean;
/**
* Sets the status bar color (similar to the `StatusBar` component).
* Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
* Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
*
* Only supported on iOS.
*

View File

@@ -11,6 +11,7 @@ import {
} from 'react-native-screens';
import { Route, useTheme } from '@react-navigation/native';
import { HeaderTitle } from '@react-navigation/elements';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import type { NativeStackNavigationOptions } from '../types';
import { processFonts } from './FontProcessor';
@@ -37,7 +38,6 @@ export default function HeaderConfig({
headerTintColor,
headerTitle,
headerTitleStyle,
headerTopInsetEnabled = true,
headerTranslucent,
route,
orientation,
@@ -47,6 +47,7 @@ export default function HeaderConfig({
statusBarStyle,
title,
}: Props): JSX.Element {
const insets = useSafeAreaInsets();
const { colors } = useTheme();
const tintColor =
headerTintColor != null
@@ -131,7 +132,7 @@ export default function HeaderConfig({
titleFontFamily={titleFontFamily}
titleFontSize={headerTitleStyleFlattened.fontSize}
titleFontWeight={headerTitleStyleFlattened.fontWeight}
topInsetEnabled={headerTopInsetEnabled}
topInsetEnabled={insets.top !== 0}
translucent={
// This defaults to `true`, so we can't pass `undefined`
headerTranslucent === true

View File

@@ -15,7 +15,6 @@ import {
ScreenStack,
StackPresentationTypes,
} from 'react-native-screens';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import warnOnce from 'warn-once';
import HeaderConfig from './HeaderConfig';
import type {
@@ -117,8 +116,6 @@ type Props = {
};
function NativeStackViewInner({ state, navigation, descriptors }: Props) {
const insets = useSafeAreaInsets();
return (
<ScreenStack style={styles.container}>
{state.routes.map((route, index) => {
@@ -197,9 +194,6 @@ function NativeStackViewInner({ state, navigation, descriptors }: Props) {
{...options}
route={route}
headerShown={isHeaderInPush}
headerTopInsetEnabled={
options.headerTopInsetEnabled ?? insets.top !== 0
}
/>
<MaybeNestedStack
options={options}

View File

@@ -3,6 +3,25 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [6.0.0-next.20](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.19...@react-navigation/stack@6.0.0-next.20) (2021-05-25)
**Note:** Version bump only for package @react-navigation/stack
# [6.0.0-next.19](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.18...@react-navigation/stack@6.0.0-next.19) (2021-05-24)
### Bug Fixes
* make transparent modal work with modal presentation ([c90bff0](https://github.com/react-navigation/react-navigation/commit/c90bff08d54d1c7151737a43d4f73abe7d364366))
# [6.0.0-next.18](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.17...@react-navigation/stack@6.0.0-next.18) (2021-05-23)

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/stack",
"description": "Stack navigator component for iOS and Android with animated transitions and gestures",
"version": "6.0.0-next.18",
"version": "6.0.0-next.20",
"keywords": [
"react-native-component",
"react-component",
@@ -40,7 +40,7 @@
"clean": "del lib"
},
"dependencies": {
"@react-navigation/elements": "^1.0.0-next.11",
"@react-navigation/elements": "^1.0.0-next.12",
"color": "^3.1.3",
"react-native-iphone-x-helper": "^1.3.0",
"warn-once": "^0.1.0"

View File

@@ -129,7 +129,7 @@ export type StackHeaderOptions = HeaderOptions & {
headerBackTestID?: string;
/**
* Title string used by the back button on iOS.
* Defaults to the previous scene's title, or "Back" if there's not enough space.
* Defaults to the previous screen's title, or "Back" if there's not enough space.
* Use `headerBackTitleVisible: false` to hide it.
*/
headerBackTitle?: string;

View File

@@ -225,7 +225,7 @@ function CardContainer({
insets={insets}
gesture={gesture}
current={scene.progress.current}
next={isNextScreenTransparent ? undefined : scene.progress.next}
next={scene.progress.next}
closing={closing}
onOpen={handleOpen}
onClose={handleClose}

View File

@@ -219,7 +219,9 @@ export default class CardStack extends React.Component<Props, State> {
// This will still be broken when 2 transitions have different idle state (e.g. modal presentation),
// but majority of the transitions look alright
const optionsForTransitionConfig =
index !== self.length - 1 && nextDescriptor
index !== self.length - 1 &&
nextDescriptor &&
nextDescriptor.options.presentation !== 'transparentModal'
? nextDescriptor.options
: descriptor.options;
@@ -251,6 +253,8 @@ export default class CardStack extends React.Component<Props, State> {
(!(
optionsForTransitionConfig.presentation === 'modal' ||
optionsForTransitionConfig.presentation === 'transparentModal' ||
nextDescriptor?.options.presentation === 'modal' ||
nextDescriptor?.options.presentation === 'transparentModal' ||
cardStyleInterpolator === forModalPresentationIOS
) &&
Platform.OS === 'ios' &&
@@ -280,13 +284,15 @@ export default class CardStack extends React.Component<Props, State> {
state.layout,
descriptor
),
next: nextGesture
? getProgressFromGesture(
nextGesture,
state.layout,
nextDescriptor
)
: undefined,
next:
nextGesture &&
nextDescriptor.options.presentation !== 'transparentModal'
? getProgressFromGesture(
nextGesture,
state.layout,
nextDescriptor
)
: undefined,
previous: previousGesture
? getProgressFromGesture(
previousGesture,
@@ -466,9 +472,13 @@ export default class CardStack extends React.Component<Props, State> {
const { options } = scenes[i].descriptor;
const {
// By default, we don't want to detach the previous screen of the active one for modals
detachPreviousScreen = options.presentation === 'transparentModal' ||
options.cardStyleInterpolator === forModalPresentationIOS
? i !== scenes.length - 1
detachPreviousScreen = options.presentation === 'transparentModal'
? false
: options.cardStyleInterpolator === forModalPresentationIOS
? i !==
scenes
.map((scene) => scene.descriptor.options.cardStyleInterpolator)
.lastIndexOf(forModalPresentationIOS)
: true,
} = options;