Feature request: Splash screen in RNN Starter

[FawadMahmood]

Hi @kanzitelli, brother I have working examples for Splash screens in RNNStarter, tested on a release app in one of my projects already find no issues so far.

Do I make a pull request if this feature is needed in this repo?

Can make all of these working, Custom Splash Screen, react-native-splash-screen, react-native-bootsplash.

[kanzitelli]

Hi bro @FawadMahmood!

That's awesome! I've seen some discussions about having Splash screen configured with RNN, but no luck. That definitely would be great to have this in the starter. I have created splash-screen branch where we can make some experiments with that and also will add that to Enhancements section with explanation.

[Yasir5247]

@kanzitelli @FawadMahmood. ok to start. i came from a web background, now trying login into mobile world. i'm very less experienced than you guys. and you guys are awesome. thank you :) but, this question is bugging me for a very long time. why not make this easy by creating a config plugin for RNN with expo. this way we can use all the benefits that comes with expo and also we get the awesome RNN library. Is it even possible? if so why not make life easy? for now upgrading, configuring splash screen, setting app icon and stuff takes lots of time. just my thoughts.

[kanzitelli]

@Yasir5247 thank you! and your thoughts are reasonable and correct. it would be much easier. I am trying to achieve that since they introduced config plugins (time to time). I could make it run on iOS but with some weird behaviour. I don't remember exactly what but it was not ready for production. I will try to do that with new SDK 46 (RN 0.69) and will definitely share that. But it will anyways need to be ejected and installed as a separate app (not through Expo Go).

That's why rnn-starter exists since 2019 😄 also it needs some tricks to make Expo and RNN work together without any issues and there are people who just like mess with native part and try some hacks there. And I think you can use any library from Expo (except of expo-splash-screen probably).

But why do you prefer RNN over react-navigation? Btw I am trying to achieve almost the same navigation structure in expo-starter as in rnn-starter. I saw you opened the issue and I will do it easier to setup navigation structure for your use case soon.

[Yasir5247]

@kanzitelli by the time i realised react-navigation is "NATIVE" using 'native-stack' my project became huge with RNN 😀. anyways right now i am changing my code base to expo-starter as expo offers "config-plugins" and "expo-dev-client". with rnn-starter. let's say i want to use oneSignal notification. i have to go into native code and setup all the stuff by myself. but luckily with there is oneSignal config plugin. i can just use it and life is easy. and i can see that many libraries offer config plugin for expo now.

It would be great to have same navigation structure in expo-starter as in rnn-starter and looking forward to it. also lets say i had 100 screens. and keeping all the screens in one file is going to be bad i guess. you are the best so i hope when you do the navigation part. you will think about about a better way for that. :)

[Yasir5247]

Hi @kanzitelli, i'm trying to add splash screen the hardway. but i don't see setSplashLayout in MainActivity.java file now. as of now. what is my best option to add splash screen to both android and ios using this repo?

public class MainActivity extends NavigationActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setSplashLayout();
  }

  private void setSplashLayout() {
    ImageView img = new ImageView(this);
    img.setImageDrawable(getDrawable(R.drawable.ic_launcher_background));
    setContentView(img);
  }

}

[kanzitelli]

hey @Yasir5247! I won't be much help in this as I've always tried to avoid using splash screens. Let's wait patiently till @FawadMahmood could do the integration.

[Yasir5247]

@kanzitelli i will be testing the new Navio package this weekend. however i would like to know if its possible to set splash screens natively. like how i did before using setSplashLayout()?

[kanzitelli]

@Yasir5247 yes, you will be able to use splash screen with Expo. They have dedicated library for that as it's used here -- https://github.com/kanzitelli/expo-starter/blob/master/App.tsx#L27

[FawadMahmood]

hey @Yasir5247! I won't be much help in this as I've always tried to avoid using splash screens. Let's wait patiently till @FawadMahmood could do the integration.

I am working on it today and will come up with an update asap.

what are your suggestions? @react-native-splash screen or boothsplash ?

[Yasir5247]

@FawadMahmood i don't mind any. i just want to create a simple splash screen in my project. which ever has the least configuration to set it up i will go for it. 😃 Thank you so much for the effort.

[Yasir5247]

@kanzitelli @FawadMahmood sorry, i had to ask this question here. but i just want to know how you guys handle deep links with react-native-navigation. here is my progress so far. when the user clicks push notification i would like to open the app and redirect user to the MailDetailScreen and show the appropriate message. because i'm passing messageId i get from oneSignal's additionalData object and passing it to the MailDetailScreen.

Right now MailDetailScreen shows. but the tab bar is not seen. just want to know the best approach here. I would really appreciate a response.

MessageScreen.tsx

useEffect(() => {
    OneSignal.setNotificationOpenedHandler(notification => {
      if(notification.notification){
        const { messageId } = notification?.notification?.additionalData as any;
        console.log('messageId', messageId)
        nav.push(componentId, 'MailDetailScreen', { messageId: messageId })
      }
    });
  }, [componentId]);

MailDetailScreen.tsx

export const MailDetailScreen: NavigationFunctionComponent = ({componentId, messageId}: any) => {
  //query
  const { loading, data, refetch } = useMessageQuery({
    variables: { id: messageId },
    notifyOnNetworkStatusChange: true
  })

 //render message details here
};

[kanzitelli]

hey @Yasir5247! My knowledge about deep linking is very basic, so I won't be much help in this. I think RN and Expo provide some good tutorials about that.

But the thing I didn't get is "but the tab bar is not seen". What do you mean by that? Isn't it being rendered?