Closed M-HARIS-97 closed 1 year ago
@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?
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?
@M-HARIS-97 a few points:
@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
@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.
@jspizziri Yes it works fine on iOS
@jspizziri After update it didn't run on android emulator
@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.
@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.
@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).
@jspizziri Ok, Noted and Thanks for your comment :)
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