Centralize the app header bar

[deepakkumardk]

Is there a way to centralize the app bar, like I want to change the style and alignment of the title, can it be done in one place, I couldn't find any doc related to it. It would be beneficial to find these issues on your own if the library has support for typescript. Any plans for it?

[sandeshnaroju]

If you are trying our library locally, you can import header from separate file normally?

import {NANO} from 'react-native-nano';

const headerText = {
  name: 'header_text',
  component: NANO.TEXT,
  value: 'Header',
  props: {
    style: {
      color: 'primaryAndWhite',
      fontSize: 20,
      fontWeight: 'normal',
    },
  },
};

export const headerView = {
  component: NANO.VIEW,
  content: [headerText],
  props: {
    style: {
      paddingHorizontal: 15,
      flexDirection: 'row',
      alignItems: 'center',
      height: 60,
      backgroundColor: 'whiteAndBlack',
    },
  },
};

And in wherever you want to use, use it like below

import { headerView } from '.Header';

const home = {
  name: 'HomeScreen',
  screen: {
    v1: [headerView],
  }
}

[sandarshnaroju]

We are currently working on adding animations and we will convert this repo to ts after that.

[deepakkumardk]

But that way we still need to add this custom-made header view to all the screens, which I don't want. I want something like we have made the changes to the screenOptions of the root stack (AppStack) of the react-navigation, and this will get reflected in all other screens. is that possible?

[sandeshnaroju]

Yes, we thought of adding that feature at root level, I have no clue how we forgot that, these option's exist at Stack.Navigator, I have noted them, currently we are working for reanimated library inclusion and converting to ts. It may take little bit of time.

[deepakkumardk]

I guess a new prop "screenOptions" will be added to the RNNano file and that can be used into the Stack.Navigator easily, & consumer has to do the following -

<RNNano screens={[screen]} screenOptions={{ headerTitleAlign: 'center' }} />

And if we go a step further we can also add other rest props to this either by rest or with stackNavigatorProps. Thoughts?

[sandeshnaroju]

Yes, The idea is to keep it simple, say props and inside the props we can have props related to NavigationContainer and Stack.Navigator. May be say

const appStart = async ({moduleParams}) => {
  const {
    messaging,
    database,
    googleSignIn,
    notificationManager,
    alert,
    network,
    deviceInfo,
    navigation,
  } = moduleParams;

  // called when is loaded first... 

}

<RNNano 
         screens={[screens]} 
         props={{
                   navigationContainerProps: {
                   ...
                   },
                   stackNavigatorProps: {
                   ...
                   }
         }} // not implemented yet
         customModules={customModules} // implemented
         customComponents={customComponents} // implemented
         appStart={appStart} // newly implemented  
/>

I just copy pasted it from local app.

[deepakkumardk]

Got it, I could create a PR then!

[sandeshnaroju]

Sure.

[deepakkumardk]

PR created.