Settings changes didn't work properly on Android

[M-HARIS-97]

I was able to change the appearance, font size, etc. But on Android, these changes last forever. It did not reset automatically. It works fine on iOS

[jspizziri]

@M-HARIS-97 I'm not sure what you mean by "last forever"? Can you please be more specific? What are you expecting vs what are you seeing? You're apparently expecting styles to revert at a certain point, however what point would that be?

[M-HARIS-97]

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  StatusBar,
  Platform,
  Modal,
  TouchableWithoutFeedback,
} from 'react-native';

// Readium Packages
import {
  ReadiumView,
  Appearance,
  RANGES,
  TextAlignment,
  Locator,
} from 'react-native-readium';

const Reading = ({navigation, route}) => {
  const dispatch = useDispatch();
  const {collectionHistoryRefresh} = useSelector(state =>
    userSelectorFull(state),
  );

  const [isVisibleModal, setisVisibleModal] = useState(false);
  const [settings, setSettings] = useState({
    appearance: Appearance.DEFAULT,
    fontSize: 100.0,
    textAlign: TextAlignment.JUSTIFY,
  });

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Feather.Button
          name="settings"
          size={25}
          backgroundColor="transparent"
          color={COLORS.white}
          onPress={() => {
            setisVisibleModal(true);
          }}
        />
      ),
    });
  }, [navigation]);

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar
          translucent
          backgroundColor="transparent"
          barStyle={'light-content'}
        />
        <Modal
          animationType="slide"
          transparent={true}
          backgroundColor="#fff"
          visible={isVisibleModal}
          onRequestClose={() => {
            setisVisibleModal(false);
          }}>
          <TouchableOpacity
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(0,0,0,0.75)',
            }}
            activeOpacity={1}
            onPressOut={() => {
              setisVisibleModal(false);
            }}>
            <View
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                alignSelf: 'center',
              }}>
              <TouchableWithoutFeedback>
                <View style={styles.modal}>
                  <Text style={styles.modalHeadText}>Book View Style</Text>

                  <Text style={styles.modalCaptionText}>Book Theme</Text>

                  <View style={styles.action}>
                    <TouchableOpacity
                      onPress={() => {
                        setSettings({
                          ...settings,
                          appearance: Appearance.DEFAULT,
                        });
                        setBookTheme(0);
                      }}
                      style={[
                        styles.otherBtnContainer,
                        {
                          backgroundColor:
                            bookTheme == 0 ? COLORS.primary : COLORS.white,
                        },
                      ]}>
                      <Text
                        style={[
                          styles.otherBtnText,
                          {
                            color:
                              bookTheme == 0 ? COLORS.white : COLORS.primary,
                          },
                        ]}>
                        Light
                      </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                      onPress={() => {
                        setSettings({
                          ...settings,
                          appearance: Appearance.NIGHT,
                        });
                        setBookTheme(1);
                      }}
                      style={[
                        styles.otherBtnContainer,
                        {
                          backgroundColor:
                            bookTheme == 1 ? COLORS.primary : COLORS.white,
                        },
                      ]}>
                      <Text
                        style={[
                          styles.otherBtnText,
                          {
                            color:
                              bookTheme == 1 ? COLORS.white : COLORS.primary,
                          },
                        ]}>
                        Dark
                      </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                      onPress={() => {
                        setSettings({
                          ...settings,
                          appearance: Appearance.SEPIA,
                        });
                        setBookTheme(2);
                      }}
                      style={[
                        styles.otherBtnContainer,
                        {
                          backgroundColor:
                            bookTheme == 2 ? COLORS.primary : COLORS.white,
                        },
                      ]}>
                      <Text
                        style={[
                          styles.otherBtnText,
                          {
                            color:
                              bookTheme == 2 ? COLORS.white : COLORS.primary,
                          },
                        ]}>
                        Sepia
                      </Text>
                    </TouchableOpacity>
                  </View>

                  <Text
                    style={[
                      styles.modalCaptionText,
                      {
                        marginTop: 10,
                      },
                    ]}>
                    Book Font Size
                  </Text>

                  <Slider
                    style={styles.progressBar}
                    value={settings.fontSize}
                    step={1}
                    minimumValue={RANGES.fontSize[0]}
                    maximumValue={RANGES.fontSize[1]}
                    thumbTintColor={COLORS.primary}
                    minimumTrackTintColor={COLORS.primary}
                    maximumTrackTintColor={COLORS.lightBlue}
                    tapToSeek={true}
                    onSlidingComplete={number => {
                      setSettings({
                        ...settings,
                        fontSize: number,
                      });
                    }}
                  />

                  <Text
                    style={[
                      styles.modalCaptionText,
                      {
                        marginTop: 10,
                      },
                    ]}>
                    Book Text Align
                  </Text>

                  <View style={styles.action}>
                    <TouchableOpacity
                      onPress={() => {
                        setSettings({
                          ...settings,
                          textAlign: TextAlignment.JUSTIFY,
                        });
                        setBookAlign(0);
                      }}
                      style={[
                        styles.otherBtnContainer,
                        {
                          backgroundColor:
                            bookAlign == 0 ? COLORS.primary : COLORS.white,
                        },
                      ]}>
                      <Text
                        style={[
                          styles.otherBtnText,
                          {
                            color:
                              bookAlign == 0 ? COLORS.white : COLORS.primary,
                          },
                        ]}>
                        Justify
                      </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                      onPress={() => {
                        setSettings({
                          ...settings,
                          textAlign: TextAlignment.START,
                        });
                        setBookAlign(1);
                      }}
                      style={[
                        styles.otherBtnContainer,
                        {
                          backgroundColor:
                            bookAlign == 1 ? COLORS.primary : COLORS.white,
                        },
                      ]}>
                      <Text
                        style={[
                          styles.otherBtnText,
                          {
                            color:
                              bookAlign == 1 ? COLORS.white : COLORS.primary,
                          },
                        ]}>
                        Left
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </TouchableOpacity>
        </Modal>
        <ReadiumView
          file={{url: route.params.filePath}}
          settings={settings}
          location={route.params.locationId}
          onLocationChange={locator => {
            locationChanged(locator);
          }}
        />
      </SafeAreaView>
    );
  };

export default Reading;

Please check the code above. I use JS for coding. Will it cause any conflict?

[jspizziri]

@M-HARIS-97 a few points:

1. You can use three "`" characters at the beginning and end of a code block to make them more readable (see the edit I made above)
2. You writing your app in JS shouldn't cause any problems.
3. I don't want to be rude, but that code block above is almost 500 lines long, and I simply don't have time to look through something that long. If you want me to review something please reduce it to its absolute smallest possible form.
4. Could you please answer the questions I left above? Settings changes didn't work properly on Android #17 (comment)

[M-HARIS-97]

@jspizziri ;
1 - ok, thanks with noted.
2 - Ok
3 - Updated
4 - Please go throw the following list
4.1 - Initialized the setting variable in the top
const [settings, setSettings] = useState({ appearance: Appearance.DEFAULT, fontSize: 100.0, textAlign: TextAlignment.JUSTIFY, });
4.2 - Then the setting variable values ​​are change
4.3 - Close the app
4.4 - Again open the app. Then,
4.5 - Expecting
4.5.1 - I want to see the book in the default setting mode I declared above
But What I'm Seeing
4.5.2 - It shows the book in the last change I made before I closed the app

I hope you understand the problem I am facing now

[jspizziri]

@M-HARIS-97 thanks for the additional detail. I now understand and have been able to reproduce your issue on Android. I tested this on iOS and it doesn't seem to be happening, so unless you can confirm otherwise I'm limiting this to an Android issue.

[M-HARIS-97]

@jspizziri Yes it works fine on iOS

[jspizziri]

@M-HARIS-97 fixed in version 1.0.4

[M-HARIS-97]

@jspizziri After update it didn't run on android emulator

[jspizziri]

@M-HARIS-97 my guess is this is something with your environment. The example project works fine on Android. If you can reproduce this issue there then please let me know.

[M-HARIS-97]

@jspizziri It works fine with V1.0.2, I upgraded to version 1.0.4 and I didn't do anything special for it. I encountered this problem only in android simulator. The ios simulator and physical devices work well with the latest version. Then I ran the following command react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res and created an index.android.js file. Then it works well in android simulator too.

Reference :- https://blog.logrocket.com/addressing-common-errors-react-native/#unable-load-script:~:text=Studio%20compatibility%20article.-,Unable%20to%20load%20script,-Another%20error%20that

[jspizziri]

@M-HARIS-97 none of the build settings, code, or configuration changed for the project. Only internal Kotlin. That wouldn't have caused an issue like this. I'm able to build and run the project perfectly fine for the example project (I don't use a simulator though as they're way too slow).

[M-HARIS-97]

@jspizziri Ok, Noted and Thanks for your comment :)