React-native: percentage support for transform translate

Created on 23 Mar 2017 · 25Comments · Source: facebook/react-native

Description

3f49e74 added support for percentages in some style properties, and its awesome.
we should also have support for transform translates.

Reproduction

I want to absolutely position a view and center it vertically.
I can now do top: '50%', but thats not centered. To make it centered I would also need transform: [{translateY: '50%'}].

Solution

Add support for percentages for translates

Additional Information

React Native version: 0.42.3
Platform: iOS
Development Operating System: MacOS
Dev tools: Xcode

Locked

Source

pvinis

👍28

Most helpful comment

i think it is important, since we have percentages for the top-level styles, to also have it for transforms.

pvinis on 26 May 2017

👍21

All 25 comments

We're cutting down on the number of outstanding issues, in order to allow us to focus. I'm closing this issue because it has been open for over 60 days with no activity. If you think it should still be opened let us know why. PRs are always welcome.

hramos on 25 May 2017

i think it is important, since we have percentages for the top-level styles, to also have it for transforms.

pvinis on 26 May 2017

👍21

It seems like this is more of an enhancement request, which we track using Canny.io.

hramos on 26 May 2017

+1 for this

daryl on 26 May 2017

100% need this!

elonmitchell on 15 Aug 2017

nirpeled on 16 Aug 2017

ronnen on 19 Sep 2017

arcarson on 8 Nov 2017

iksent on 9 Nov 2017

cappe on 12 Nov 2017

Jarred-Sumner on 26 Nov 2017

osdnk on 30 Nov 2017

moriaam on 4 Dec 2017

BalalRaza on 13 Dec 2017

andcosta on 20 Dec 2017

joaosilva05 on 27 Dec 2017

+1 please update on this issue

hackerhgl on 28 Dec 2017

+1 this is a huge deal when attempting fluid layouts for Android devices in particular.

ChrisBews on 11 Jan 2018

ghost on 29 Jan 2018

maayannoyhalevi on 31 Jan 2018

Example Workaround with RN onLayout event:

class Foo extends Component {
  ...
  onLayout = event => {
    const { width } = event.nativeEvent.layout;
    this.setState({ myWidth: width });
  };
  ...
  render() {
    const { myWidth } = this.state;

    return(
      <View
        onLayout={this.onLayout}
        style={{transform: [{translateY: myWidth / 2 }]}}>
          ...
      <View/>
    )
  }
}