Geeks With Blogs
Celin Smith Software and App Developer from California
Nowadays mobile phones have become the integral part of our lives and when it comes to Android development or iOS development means when you are looking for an app creator then businesses get confused whether they should offer their users, mobile apps with attractive User Interface (UI) and amazing User Experience (UX) or apps which are compatible with multiple platforms and are faster to develop. Hence, React Native Development comes into the picture. React Native is an open source framework which can provide UI for both iOS and Android platforms.




You need to hire a React Native Development Company if you also want to get its benefits. React Native helps you to create real and exciting mobile applications with the help of JavaScript only, which is supported on both Android and iOS platforms. You just need to code once and the React Native apps will be available for both iOS and Android platforms which helps in saving lots of development time. React Native is backed by Facebook and has a huge community support.
 
As it uses the same code for creating React Native iOS or the React Native Android apps and web applications hence you just need to know the JSX, CSS styling and the JavaScript. React Native is a great pick for those developers who have expertise in JavaScript as there is no need to learn Android specific Java or iOS’s Swift.

 
Animating Header Titles in React Native:

When you Hire React Native Developer certainly he can make this easier for you in animating the header titles. When we create our parallax headers in React Native then often we face difficult situation: using the Animated.interpolate() function to transition our styles between two Flexbox properties.
 
We want to make our text transition from flex-start to center but it is not that easy to implement. When we look at the documentation for Animated, we come to know that while interpolate accepts strings for values but it is limited to colors and values with units.
 
Actually we have to get creative with the Animated API in order to replicate our Flexbox transition in some other way. Think about the animation which you want to do. Below are the steps to achieve it.

Initial setup
 
You have to do the below things to get started:-
1.A component with a custom parallax header
 
2.A ScrollView, FlatList etc in your component
We  will utilize the onScroll event to trigger changes to our animation.

3.Some content in your scrolling list to test our animation


Step 1: Setting up our animated header
There are many ways to set up your header based on your use case. We are giving our setup for this example. Below is the code and you will also get an explanation for the important parts which will help us animate our text.
screenWidth = Dimensions.get('window').width;

<Animated.View
  style={
    flexDirection: 'row',
    justifyContent: 'center',
    paddingHorizontal: screenWidth * 0.05,
    width: screenWidth,
    alignItems: 'flex-end',
    height: this.state.scrollOffset.interpolate({
      inputRange: [0, 200],
      outputRange: [120, 64],
      extrapolate: 'clamp',
    }),
  }
>
 
Explanation of the important things in this code are:-
1.flexDirection:’row’- It allows us to animate our text horizontally.
2.justifyContent:’center’- It allows us to control our text alignment.
3.paddingHorizontal - It gives us the exact width of the area where our title is provided.
4.width:screenWidth - It ensures the truly spanning of the entire screen and

we want to explicitly define this value rather than setting it to 100%.


Step 2: Left-aligning our text while centering our content
You can note that our header styles contain justifyContent:’center’ - which will help us get things centered at the end of our animation.
To start our text in a left-aligned state, we should be more attentive. React Native provides a handy onLayout callback which informs us of our view’s exact size on the screen after it is provided. Below is how we are utilizing onLayout for our <Animated.Text> component rendering our text:
onLayout={e => {
   const titleWidth = e.nativeEvent.layout.width;
   this.setState({ titleWidth });
}}

 
We store the width of our header title when it renders as by this we can push it left aligned by adding an invisible view directly to the right of it in our header.
The header has width equal to the screen width, with 5% padding on both the left and the right sides. Hence, the space where our title is rendered has a width of 90% of the screen width. We can calculate the width of our invisible view as screenWidth * 0.9 - this.state.titleWidth
Without any animations, we now have the below code:
<Animated.Text
  onLayout={e => {
    const titleWidth = e.nativeEvent.layout.width;
    this.setState({ titleWidth });
  }}
  style={{
    fontWeight: 'bold',
    fontSize: 26,
  }}
>
  Header Title Here
</Animated.Text>
<Animated.View
  style={{ 
    width: screenWidth * 0.9 - this.state.titleWidth,
  }}
/>

 
When we provide this view next to our text then our text is left-aligned.


Step 3: Animating the text alignment
Now in this last step we just need to animate the width of our invisible view from its initial width down to zero at the conclusion of our animation and our text will be centered. You can also add any other animations which you like to your text, header etc.
Below is our implementation:-
<Animated.Text
  onLayout={e => {
    if (this.offset === 0 && this.state.titleWidth === 0) {
      const titleWidth = e.nativeEvent.layout.width;
      this.setState({ titleWidth });
    }
  }}
  style={{
    fontWeight: 'bold',
    fontSize: scrollOffset.interpolate({
      inputRange: [0, 200],
      outputRange: [26, 20],
      extrapolate: 'clamp',
    }),
  }}>
  Header Title Here
</Animated.Text>
<Animated.View
  style={{
    width: scrollOffset.interpolate({
      inputRange: [0, 200],
      outputRange: [screenWidth * 0.9 - this.state.titleWidth, 0],
      extrapolate: 'clamp',
    }),
  }}
/>

 
Finally, now you just need to wire up the onScroll listener in ScrollView and check the animation. It is done now. That’s the beauty of React Native. When you hire any app Development Company then make sure they have React Native developers so that you can build app which can run on any platform.
Posted on Thursday, August 2, 2018 12:44 AM App Development , mobile application development , app developer , react native , React Native mobile app , Animate Header | Back to top


Comments on this post: What is React Native and How to Animate Header Titles in this?

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Celin Smith | Powered by: GeeksWithBlogs.net