How to use the @react-navigation/stack.TransitionSpecs.TransitionIOSSpec function in @react-navigation/stack
To help you get started, we’ve selected a few @react-navigation/stack 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.
berty / berty / js / packages / navigation / stacks.tsx View on Github 
} from '@react-navigation/stack'
import * as RawComponents from '@berty-tech/components'
import mapValues from 'lodash/mapValues'
import { useMsgrContext } from '@berty-tech/store/hooks'
import { Routes } from './types'
import { MessengerAppState } from '@berty-tech/store/context'
import { dispatch, navigate } from '@berty-tech/navigation/rootRef'
const CustomTransitionOptions: StackNavigationOptions = {
headerShown: false,
gestureEnabled: true,
gestureDirection: 'horizontal',
transitionSpec: {
open: TransitionSpecs.TransitionIOSSpec,
close: TransitionSpecs.TransitionIOSSpec,
},
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
cardStyleInterpolator: ({ current, next, layouts }: StackCardInterpolationProps) => {
return {
cardStyle: {
transform: [
{
translateX: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [layouts.screen.width, 0],
}),
},
{
scale: next
? next.progress.interpolate({
inputRange: [0, 1],},
overlayStyle: {
opacity: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
}),
},
}
},
}
const ModalScreenOptions: StackNavigationOptions = {
headerShown: false,
cardStyle: { backgroundColor: 'transparent' },
transitionSpec: {
open: TransitionSpecs.TransitionIOSSpec,
close: TransitionSpecs.TransitionIOSSpec,
},
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
cardStyleInterpolator: ({ current }: StackCardInterpolationProps) => {
return {
cardStyle: {
opacity: current.progress,
},
}
},
}
function useLinking() {
const [url, setUrl] = useState(null)
const [error, setError] = useState()overlayStyle: {
opacity: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.5],
}),
},
}
},
}
const ModalScreenOptions: StackNavigationOptions = {
headerShown: false,
cardStyle: { backgroundColor: 'transparent' },
transitionSpec: {
open: TransitionSpecs.TransitionIOSSpec,
close: TransitionSpecs.TransitionIOSSpec,
},
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
cardStyleInterpolator: ({ current }: StackCardInterpolationProps) => {
return {
cardStyle: {
opacity: current.progress,
},
}
},
}
function useLinking() {
const [url, setUrl] = useState(null)
const [error, setError] = useState()
async function initialUrl() {TransitionSpecs,
} from '@react-navigation/stack'
import * as RawComponents from '@berty-tech/components'
import mapValues from 'lodash/mapValues'
import { useMsgrContext } from '@berty-tech/store/hooks'
import { Routes } from './types'
import { MessengerAppState } from '@berty-tech/store/context'
import { dispatch, navigate } from '@berty-tech/navigation/rootRef'
const CustomTransitionOptions: StackNavigationOptions = {
headerShown: false,
gestureEnabled: true,
gestureDirection: 'horizontal',
transitionSpec: {
open: TransitionSpecs.TransitionIOSSpec,
close: TransitionSpecs.TransitionIOSSpec,
},
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
cardStyleInterpolator: ({ current, next, layouts }: StackCardInterpolationProps) => {
return {
cardStyle: {
transform: [
{
translateX: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [layouts.screen.width, 0],
}),
},
{
scale: next
? next.progress.interpolate({@react-navigation/stack
Stack navigator component for iOS and Android with animated transitions and gestures
