title: How to create a sort of Context Template for different parents components in react native?
body: <p>I wanted to Internationalize my react native app only using redux, but for the sake of brevity I'm going to elude the part relative to redux since the whole app is working perfectly fine. for each screen component of the app, I create a context to wrap the screen component and pass down all the strings related to the screen</p>
  <p>So i created the context in a separate file that I'm exporting as <strong>Language</strong>:</p>
  <pre><code>import React, { useContext, createContext } from &quot;react&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  import { getTranslation } from &quot;../../../redux/reducers/translation/selector/selector&quot;;
  import {language} from &quot;./Util&quot;;
  
  export const Context = createContext();
  
  export const useLanguageContext = () =&gt; {
    return useContext(Context);
  };
  
  export default function Language({ children }) {
    const translation = useSelector(getTranslation);
    const lang = language(translation.lang);
    return &lt;Context.Provider value={lang}&gt;{children}&lt;/Context.Provider&gt;;
  }
  </code></pre>
  <p><code>translation.lang</code> is the current language grabbed from redux that I pass to the <code>language</code> function to get the strings related to the screen accordingly. in this case it's going to be the Entrance screen. Here is the logic for the <code>language</code> function:</p>
  <pre><code>import french from &quot;../../../i18n/french/auth/entrance/i18n&quot;;
  import english from &quot;../../../i18n/english/auth/entrance/i18n&quot;;
  import spanish from &quot;../../../i18n/spanish/auth/entrance/i18n&quot;;
  import wolof from &quot;../../../i18n/wolof/auth/entrance/i18n&quot;;
  
  export const language = (translation) =&gt; {
    switch (translation) {
      case &quot;french&quot;:
        return french;
      case &quot;english&quot;:
        return english;
      case &quot;spanish&quot;:
        return spanish;
      case &quot;wolof&quot;:
        return wolof;
      default:
        return french;
    }
  };
  </code></pre>
  <p>and I wrap the <strong>Entrance</strong> screen with the context like this</p>
  <pre><code>import React from &quot;react&quot;;
  import { View } from &quot;react-native&quot;;
  import { Slider, Button } from &quot;../../../components/organisms/auth/Entrance&quot;;
  import Language from &quot;../../../utils/language/context&quot;;
  import { styles } from &quot;./Style&quot;;
  
  export default function Entrance() {
    return (
      &lt;Language&gt;
        &lt;View style={styles.container}&gt;
          &lt;Slider /&gt;
          &lt;Button /&gt;
        &lt;/View&gt;
      &lt;/Language&gt;
    );
  }
  </code></pre>
  <p>And finally, from a child component like Button, I can retrieve the language object passed through like this</p>
  <pre><code>import React from &quot;react&quot;;
  import { Text, TouchableOpacity } from &quot;react-native&quot;;
  import { useNavigation } from &quot;@react-navigation/native&quot;;
  import { useLanguageContext } from &quot;../../../../../../utils/language/context&quot;;
  import { styles } from &quot;./Style&quot;;
  
  export default function Button() {
    const lang = useLanguageContext();
    const navigation = useNavigation();
    return (
      &lt;TouchableOpacity
        style={styles.container}
        onPress={() =&gt; {
          navigation.navigate(&quot;LoginNavigator&quot;);
        }}
      &gt;
        &lt;Text style={styles.text}&gt;{lang.login}&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  }
  </code></pre>
  <p>Now all of this is working perfectly fine but the main problem is I'm going to have a lot of screens and don't want to be repeating this process of creating a context for each and every screen. Isn't there a neater way to create a sort of Context template that I can use for the different screens instead of creating one for each screen?</p>