Shadow in navigator transition? #2301

Closed
dubert opened this Issue Aug 11, 2015 · 20 comments

Comments

Projects
None yet
6 participants
@dubert
Contributor

dubert commented Aug 11, 2015

Anyone know how I can add a shadow to the navigator transition? Right here?
(With Navigator, not NavigatorIOS)
shaddodooowww

Things I've tried:

  • Style on the components
  • sceneStyle on the Navigator
  • adding shadows to the NavigatorSceneConfigs
@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 12, 2015

Contributor

I tried to do this as well couple of days ago without any success. For now I've set root component's background dark to fake scene going underneath but it gives ugly borders.

Example of my solution with ugly borders

Contributor

jozan commented Aug 12, 2015

I tried to do this as well couple of days ago without any success. For now I've set root component's background dark to fake scene going underneath but it gives ugly borders.

Example of my solution with ugly borders

@dubert

This comment has been minimized.

Show comment
Hide comment
@dubert

dubert Aug 13, 2015

Contributor

@brentvatne @ericvicenti would either of you have some insight into how to do this?

Contributor

dubert commented Aug 13, 2015

@brentvatne @ericvicenti would either of you have some insight into how to do this?

@ericvicenti

This comment has been minimized.

Show comment
Hide comment
@ericvicenti

ericvicenti Aug 13, 2015

Contributor

Navigator takes a sceneStyle prop. Have you tried putting shadow styles on it?

On Aug 13, 2015, at 8:25 AM, Luke Dubert <notifications@github.commailto:notifications@github.com> wrote:

@brentvatnehttps://github.com/brentvatne @ericvicentihttps://github.com/ericvicenti would either of you have some insight into how to do this?


Reply to this email directly or view it on GitHubhttps://github.com/facebook/react-native/issues/2301#issuecomment-130728387.

Contributor

ericvicenti commented Aug 13, 2015

Navigator takes a sceneStyle prop. Have you tried putting shadow styles on it?

On Aug 13, 2015, at 8:25 AM, Luke Dubert <notifications@github.commailto:notifications@github.com> wrote:

@brentvatnehttps://github.com/brentvatne @ericvicentihttps://github.com/ericvicenti would either of you have some insight into how to do this?


Reply to this email directly or view it on GitHubhttps://github.com/facebook/react-native/issues/2301#issuecomment-130728387.

@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 13, 2015

Contributor

Thanks @ericvicenti. It worked but it's not dynamic like in NavigatorIOS.

Remember to set overflow: 'visible' otherwise shadow doesn't show.

<Navigator sceneStyle={{overflow: 'visible'}} />
Contributor

jozan commented Aug 13, 2015

Thanks @ericvicenti. It worked but it's not dynamic like in NavigatorIOS.

Remember to set overflow: 'visible' otherwise shadow doesn't show.

<Navigator sceneStyle={{overflow: 'visible'}} />
@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 13, 2015

Collaborator

@jozan - could you explain what you mean by dynamic?

Collaborator

brentvatne commented Aug 13, 2015

@jozan - could you explain what you mean by dynamic?

@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 13, 2015

Contributor

@brentvatne Check shadow's opacity.

Shadow opacity

Contributor

jozan commented Aug 13, 2015

@brentvatne Check shadow's opacity.

Shadow opacity

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 13, 2015

Collaborator

@jozan - good point! it changes as you move further to the left to be darker - that would be possible to do if the view was an Animated.View and Navigator provided some hook into the swipe events that would allow us to update that value accordingly

Collaborator

brentvatne commented Aug 13, 2015

@jozan - good point! it changes as you move further to the left to be darker - that would be possible to do if the view was an Animated.View and Navigator provided some hook into the swipe events that would allow us to update that value accordingly

@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 13, 2015

Contributor

@brentvatne Yes, I hope Navigator starts using Animated soon.

🐤

Contributor

jozan commented Aug 13, 2015

@brentvatne Yes, I hope Navigator starts using Animated soon.

🐤

@dubert

This comment has been minimized.

Show comment
Hide comment
@dubert

dubert Aug 13, 2015

Contributor

UNBELIEVABLE. Thank you so much! I've been trying to figure this out for 4 days. And all I needed was an overflow: visible style.

One of the first things I tried was putting the shadow on sceneStyle but it didn't work because I didn't have overflow: visible.

Yeah, next step is making it dynamic. I'll poke around in Navigator and sceneConfigs to see what I can do.

Contributor

dubert commented Aug 13, 2015

UNBELIEVABLE. Thank you so much! I've been trying to figure this out for 4 days. And all I needed was an overflow: visible style.

One of the first things I tried was putting the shadow on sceneStyle but it didn't work because I didn't have overflow: visible.

Yeah, next step is making it dynamic. I'll poke around in Navigator and sceneConfigs to see what I can do.

@dubert dubert closed this Aug 13, 2015

@ericvicenti

This comment has been minimized.

Show comment
Hide comment
@ericvicenti

ericvicenti Aug 13, 2015

Contributor

It might be a bumpy transition, but we are working on a new Navigator which fully utilizes Animated and allows scenes to perform their own animation

Contributor

ericvicenti commented Aug 13, 2015

It might be a bumpy transition, but we are working on a new Navigator which fully utilizes Animated and allows scenes to perform their own animation

@dubert

This comment has been minimized.

Show comment
Hide comment
@dubert

dubert Aug 13, 2015

Contributor

That's really exciting @ericvicenti. Will there be a prebuilt style that mimics iOS as closely as possible?

Contributor

dubert commented Aug 13, 2015

That's really exciting @ericvicenti. Will there be a prebuilt style that mimics iOS as closely as possible?

@dubert

This comment has been minimized.

Show comment
Hide comment
@dubert

dubert Aug 14, 2015

Contributor

@jozan I got it working using sceneConfigs:
It's not 100% perfect (it's not eased and there isn't a darkened overlay), but it's pretty close.

in your Navigator component:

configureScene={route => {
  if (route.sceneConfig) return route.sceneConfig
  return Navigator.SceneConfigs.AsCloseToNativeIOSAsPossible
}}

in Libraries > CustomComponents > Navigator > NavigatorSceneConfigs:

var NativeFadeToTheLeft = {
  transformTranslate: {
    from: {x: 0, y: 0, z: 0},
    to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },
  opacity: {
    from: 1,
    to: 0.3,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100,
  },
  translateX: {
    from: 0,
    to: -Math.round(Dimensions.get('window').width * 0.3),
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },
};

var NativeFromTheRight = {
  opacity: {
    value: 1.0,
    type: 'constant',
  },
  shadowColor: {
    value: '#000000',
    type: 'constant',
  },

  shadowOpacity: {
    from: 0.1,
    to: 0.5,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100,
  },

  shadowRadius: {
    from: 2,
    to: 6,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
  },

  transformTranslate: {
    from: {x: Dimensions.get('window').width, y: 0, z: 0},
    to: {x: 0, y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },

  translateX: {
    from: Dimensions.get('window').width,
    to: 0,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },

};

// [...omitted]

var NavigatorSceneConfigs = {
  AsCloseToNativeIOSAsPossible: {
    ...BaseConfig,
    // I added these gestures because I didn't want to pop, I wanted jumpBack and Forward
    gestures: {
      jumpBack: BaseLeftToRightGesture,
      jumpForward: BaseRightToLeftGesture,
    },
    animationInterpolators: {
      into: buildStyleInterpolator(NativeFromTheRight),
      out: buildStyleInterpolator(NativeFadeToTheLeft),
    },
  },
  // [...omitted]
}
Contributor

dubert commented Aug 14, 2015

@jozan I got it working using sceneConfigs:
It's not 100% perfect (it's not eased and there isn't a darkened overlay), but it's pretty close.

in your Navigator component:

configureScene={route => {
  if (route.sceneConfig) return route.sceneConfig
  return Navigator.SceneConfigs.AsCloseToNativeIOSAsPossible
}}

in Libraries > CustomComponents > Navigator > NavigatorSceneConfigs:

var NativeFadeToTheLeft = {
  transformTranslate: {
    from: {x: 0, y: 0, z: 0},
    to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },
  opacity: {
    from: 1,
    to: 0.3,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100,
  },
  translateX: {
    from: 0,
    to: -Math.round(Dimensions.get('window').width * 0.3),
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },
};

var NativeFromTheRight = {
  opacity: {
    value: 1.0,
    type: 'constant',
  },
  shadowColor: {
    value: '#000000',
    type: 'constant',
  },

  shadowOpacity: {
    from: 0.1,
    to: 0.5,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100,
  },

  shadowRadius: {
    from: 2,
    to: 6,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
  },

  transformTranslate: {
    from: {x: Dimensions.get('window').width, y: 0, z: 0},
    to: {x: 0, y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },

  translateX: {
    from: Dimensions.get('window').width,
    to: 0,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get(),
  },

};

// [...omitted]

var NavigatorSceneConfigs = {
  AsCloseToNativeIOSAsPossible: {
    ...BaseConfig,
    // I added these gestures because I didn't want to pop, I wanted jumpBack and Forward
    gestures: {
      jumpBack: BaseLeftToRightGesture,
      jumpForward: BaseRightToLeftGesture,
    },
    animationInterpolators: {
      into: buildStyleInterpolator(NativeFromTheRight),
      out: buildStyleInterpolator(NativeFadeToTheLeft),
    },
  },
  // [...omitted]
}
@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 14, 2015

Contributor

@dubert Thank! I will try that. Maybe you could create PR of the scene config and get it integrated.

@ericvicenti Would PR for Navigator be waste when reworked version is coming?

Contributor

jozan commented Aug 14, 2015

@dubert Thank! I will try that. Maybe you could create PR of the scene config and get it integrated.

@ericvicenti Would PR for Navigator be waste when reworked version is coming?

@ericvicenti

This comment has been minimized.

Show comment
Hide comment
@ericvicenti

ericvicenti Aug 14, 2015

Contributor

It will be better to not to spend time adding features to the current Navigator while we work on the new one.

I'm sure that with the community's help, we can make the new Animated Navigator have a very close resemblance to the platform navigation

Contributor

ericvicenti commented Aug 14, 2015

It will be better to not to spend time adding features to the current Navigator while we work on the new one.

I'm sure that with the community's help, we can make the new Animated Navigator have a very close resemblance to the platform navigation

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 14, 2015

Collaborator

Nice one @dubert!

Collaborator

brentvatne commented Aug 14, 2015

Nice one @dubert!

@jozan

This comment has been minimized.

Show comment
Hide comment
@jozan

jozan Aug 14, 2015

Contributor

@ericvicenti Any estimation when the Animated Navigator will be released?

Contributor

jozan commented Aug 14, 2015

@ericvicenti Any estimation when the Animated Navigator will be released?

@Obooman

This comment has been minimized.

Show comment
Hide comment
@Obooman

Obooman Dec 19, 2015

@dubert Awesome!It's really a great solution(I don't like the scale animation) and thank you so much.Besides,I wrapped with element whose background color is black,and set the config opacity form 1 to 0.8.It seems like we have the darkened overlay ,something like this:
overlay

Obooman commented Dec 19, 2015

@dubert Awesome!It's really a great solution(I don't like the scale animation) and thank you so much.Besides,I wrapped with element whose background color is black,and set the config opacity form 1 to 0.8.It seems like we have the darkened overlay ,something like this:
overlay

@mitchellhuang

This comment has been minimized.

Show comment
Hide comment
@mitchellhuang

mitchellhuang Jun 10, 2016

@dubert I'm getting errors like this on RN 0.27.0

View #1176 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Any solution? Lol - sorry about reviving an old issue.

@dubert I'm getting errors like this on RN 0.27.0

View #1176 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Any solution? Lol - sorry about reviving an old issue.

@dubert

This comment has been minimized.

Show comment
Hide comment
@dubert

dubert Jun 10, 2016

Contributor

@huangbong does setting a background color not work?

Contributor

dubert commented Jun 10, 2016

@huangbong does setting a background color not work?

@mitchellhuang

This comment has been minimized.

Show comment
Hide comment

@dubert does not

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment