title: Go to next page after give permission Apple Health Kit
body: <p>I'm implementing Apple HealthKit on my React Native project, I was able to call it and show the permission page, but when I allow it, throws me back to the same page, how can I make it when I give the permissions it navigates to the next screen?</p>
  <p>here is my code</p>
  <p>The page that asks for permission</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useRef, useEffect } from 'react';
  import {
    View,
    FlatList,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    SafeAreaView,
  } from 'react-native';
  import ProgressCircle from 'react-native-progress-circle';
  import Icon from 'react-native-vector-icons/AntDesign';
  import styles from './styles';
  import AppleHealthKit, {
    HealthValue,
    HealthKitPermissions,
  } from 'react-native-health';
  import AppleHKit from '../onboarding/applehealthkit';
  import appleHealthKit from 'react-native-health';
  
  const onboardingScreensData = [
    {
      title: 'NOT CONNECTED',
      imagePath: require('../../assets/images/applehealthbkgoff.png'),
    },
    {
      title: 'NOT CONNECTED',
      imagePath: require('../../assets/images/applehealthbkgon.png'),
    },
    {
      title: 'CONNECTED',
      imagePath: require('../../assets/images/applehealthbkgon.png'),
    },
  ];
  
  const AppleHealth = ({ navigation }) =&gt; {
    const screenWidth = Dimensions.get('screen').width;
  
    const onboardingFlastListRef = useRef(null);
    const renderItem = ({ item, index }) =&gt; (
      &lt;Item title={item.title} imagePath={item.imagePath} index={index} /&gt;
    );
  
    useEffect(() =&gt; {});
  
    const Item = ({ title, imagePath, index }) =&gt; (
      &lt;View style={styles.container}&gt;
        &lt;SafeAreaView style={{ flex: 1, flexDirection: 'column' }}&gt;
          &lt;View
            style={{ flex: 0.25, justifyContent: 'flex-end', paddingTop: 20 }}&gt;
            &lt;Image
              source={require('../../assets/images/applehealthlogo.png')}
              style={{
                alignSelf: 'center',
              }}
              resizeMode={'contain'}
            /&gt;
            &lt;Text
              style={{
                textAlign: 'center',
                paddingHorizontal: 20,
                fontSize: 30,
                fontWeight: 'bold',
              }}&gt;
              Apple Health
            &lt;/Text&gt;
          &lt;/View&gt;
          {index == 2 ? (
            &lt;View
              style={{
                alignItems: 'center',
                justifyContent: 'flex-start',
                flex: 0.13,
              }}&gt;
              &lt;Text style={{ fontSize: 12, margin: 10, color: 'green' }}&gt;
                {title}
              &lt;/Text&gt;
            &lt;/View&gt;
          ) : (
            &lt;View
              style={{
                alignItems: 'center',
                justifyContent: 'flex-start',
                flex: 0.13,
              }}&gt;
              &lt;Text style={{ fontSize: 12, margin: 10, color: 'red' }}&gt;
                {title}
              &lt;/Text&gt;
            &lt;/View&gt;
          )}
  
          &lt;View
            style={{
              justifyContent: 'flex-end',
              alignItems: 'center',
              flex: 0.6,
            }}&gt;
            &lt;Text style={{ fontSize: 25 }}&gt;How to connect&lt;/Text&gt;
            &lt;Text
              style={{
                textAlign: 'center',
                marginHorizontal: 20,
                marginTop: 15,
                marginBottom: 20,
                fontSize: 17,
              }}&gt;
              Select Empatho is Apple Health Sources and tap Turn All Categories
              On
            &lt;/Text&gt;
            {index == 2 ? (
              &lt;View&gt;
                &lt;TouchableOpacity
                  style={{
                    justifyContent: 'center',
                    backgroundColor: '#533AED',
                    height: 50,
                    borderRadius: 50,
                    alignItems: 'center',
                    width: '80%',
                    paddingHorizontal: 10,
                  }}
                  onPress={() =&gt; navigation.navigate('SurveyHR')}&gt;
                  &lt;View
                    style={{
                      paddingVertical: 10,
                      paddingHorizontal: 10,
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}&gt;
                    &lt;Text
                      style={{
                        fontSize: 16,
                        color: '#FFF',
                        alignItems: 'center',
                        letterSpacing: 1,
                      }}&gt;
                      PROCEED WITHOUT{' '}
                    &lt;/Text&gt;
                    &lt;Image
                      source={require('../../assets/images/miniapple.png')}
                    /&gt;
                    &lt;Text
                      style={{
                        fontSize: 16,
                        color: '#FFF',
                        alignItems: 'center',
                        letterSpacing: 1,
                      }}&gt;
                      {' '}
                      WATCH
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('SignIn')}&gt;
                  &lt;Text
                    style={{
                      color: '#533AED',
                      textAlign: 'center',
                      marginTop: 10,
                    }}&gt;
                    I HAVE APPLE WATCH
                  &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            ) : (
              &lt;View style={{ width: screenWidth, alignItems: 'center' }}&gt;
                &lt;TouchableOpacity
                  style={{
                    justifyContent: 'center',
                    backgroundColor: '#533AED',
                    height: 50,
                    borderRadius: 50,
                    alignItems: 'center',
                    width: '80%',
                  }}
                  onPress={
                    () =&gt; AppleHKit()
                    // onboardingFlastListRef.current.scrollToIndex({
                    //   animated: true,
                    //   index: index + 1,
                    // })
                  }&gt;
                  &lt;View
                    style={{
                      paddingVertical: 10,
                      paddingHorizontal: 10,
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}&gt;
                    &lt;Text
                      style={{
                        fontSize: 16,
                        color: '#FFF',
                        alignItems: 'center',
                        paddingRight: 30,
                        paddingLeft: 40,
                      }}&gt;
                      CONNECT
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/TouchableOpacity&gt;
                &lt;Text
                  style={{
                    color: '#533AED',
                    textAlign: 'center',
                    marginTop: 10,
                  }}&gt;&lt;/Text&gt;
              &lt;/View&gt;
            )}
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
        &lt;Image
          source={imagePath}
          resizeMode=&quot;cover&quot;
          style={[
            styles.backgroundImage,
            { position: 'absolute', bottom: 30, zIndex: -1 },
          ]}&gt;&lt;/Image&gt;
      &lt;/View&gt;
    );
    
    return (
      &lt;View style={styles.container}&gt;
        &lt;FlatList
          ref={onboardingFlastListRef}
          data={onboardingScreensData}
          renderItem={renderItem}
          keyExtractor={(item, index) =&gt; index.toString()}
          horizontal={true}
          decelerationRate={'fast'}
          snapToInterval={screenWidth}
          showsHorizontalScrollIndicator={false}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  export default AppleHealth;
  </code></pre>
  <p>Class to edit permissions on HealthKit</p>
  <pre class="lang-js prettyprint-override"><code>import AppleHealthKit, {
    HealthValue,
    HealthKitPermissions,
  } from 'react-native-health';
  
  const HealthKit = () =&gt; {
    /* Permission options */
    const permissions = {
      permissions: {
        read: [AppleHealthKit.Constants.Permissions.HeartRate],
        write: [AppleHealthKit.Constants.Permissions.Steps],
      },
    };
  
    AppleHealthKit.initHealthKit(permissions, (error) =&gt; {
      /* Called after we receive a response from the system */
  
      if (error) {
        console.log('[ERROR] Cannot grant permissions!');
      }
  
      /* Can now read or write to HealthKit */
  
      const options = {
        startDate: new Date(2020, 1, 1).toISOString(),
      };
  
      AppleHealthKit.getHeartRateSamples(options, (callbackError, results) =&gt; {
        /* Samples are now collected from HealthKit */
      });
    });
  };
  
  export default HealthKit;
  </code></pre>
  <p>Anyone can give me a light here?</p>