react-native app behaves diffrently when assembling it in different cpu architecture - react-native

Question

I was trying to build a social media application. In the profile screen I have Flatlist that renders the information. It is alright when I'm in dubugging mode or in normal exporting mode (without different cpu architecures) but when I try to export and assemble the output apk with different architecture ap stops working when we are touching the profile bottom tap icon.
Do you have any idea what is happening when we are trying to export and assemble the release apk?
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useContext} from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
KeyboardAvoidingView,
FlatList,
RefreshControl,
Text,
} from 'react-native';
import {Snackbar} from 'react-native-paper';
import jwtDecode from 'jwt-decode';
import Feather from 'react-native-vector-icons/dist/Feather';
import {AppScreen} from '../../Layouts';
import {
AppProfileHeader,
AppProfileBio,
AppProfileBioContent,
AppProfilePosts,
AppProfileTopNavHeader,
AppBioCallToActions,
AppProfileStepsSlider,
} from '../../Containers';
import {
AppInputContainer,
AppText,
ContactUserModal,
AppButton,
ProfileCommentsListModal,
AppUserPostComment,
AppCommentInput,
AppPostUploaderBox,
} from '../../Components';
import {Colors, Fonts, ScreenSize} from '../../Constants';
import {ScrollView} from 'react-native-gesture-handler';
import {AppContext, AuthStorage} from '../../Services';
import {ProfileApis, SettingsApis} from '../../Services/Apis';
export default function ProfileScreen({navigation}) {
const {
user,
setUser,
setUserPosts,
userPosts,
setUserProfileInfo,
userProfileInfo,
} = useContext(AppContext);
const restoreToken = async () => {
const token = await AuthStorage.getToken();
if (!token) {
return;
}
const decodedToken = jwtDecode(token);
setUser(decodedToken);
};
const [refreshing, setRefreshing] = useState(false);
const [userCategoryType, setUserCategoryType] = useState();
const [commentAccountText, setCommentAccountText] = useState('');
const [accountCommentList, setAccountCommentList] = useState('');
const [editUserConnectionInputs, setEditUserConnectionInputs] = useState(
false,
);
const [contactUserInfo, setContactUserInfo] = useState({});
const contactUserInfoTextChangeHandler = (key, text) => {
setContactUserInfo((prev) => {
return {
...prev,
[key]: text,
};
});
};
const [snackbarVisible, setSnackbarVisible] = useState(false);
const onDismissSnackBar = () => setSnackbarVisible(false);
const [contactModalVisible, setContactModalVisible] = useState(false);
const [profileCommentsVisible, setProfileCommentsVisible] = useState(false);
const modalVisibilityHandler = () => {
setContactModalVisible(!contactModalVisible);
};
const updateUserContactInfoHandler = async () => {
try {
const result = await SettingsApis.updateAccountDatum({
datum: {...contactUserInfo},
});
if (result.data.status) {
setEditUserConnectionInputs(false);
modalVisibilityHandler();
setSnackbarVisible(true);
}
} catch (error) {
console.log("can't update user contactInfo", error.message);
}
};
const profileCommentVisibilityHandler = () => {
setProfileCommentsVisible(!profileCommentsVisible);
};
const topHeaderNavigationHandler = (route, param) => {
navigation.navigate(route, param);
};
const imagePickerHandler = () => {
navigation.jumpTo('CreatePost');
};
const fetchProfileInfo = async () => {
if (await AuthStorage.getToken()) {
try {
const result = await ProfileApis.profileInfo({
account: user.xdefaultaccount,
});
if (result.data.status) {
setUserProfileInfo(result.data.datum);
setContactUserInfo(result.data.datum);
setRefreshing(false);
}
} catch (error) {
console.log(error.message);
}
}
};
const fetchPosts = async () => {
try {
const result = await ProfileApis.getPosts({
account: userProfileInfo.id,
});
if (result.data.status) {
setUserPosts(result.data.datum);
} else {
console.log('fetch error');
}
} catch (error) {}
};
const updateStar = async (score) => {
try {
const result = await ProfileApis.updateStar({
node: userProfileInfo.id,
vote: score,
});
if (result.status) {
fetchProfileInfo();
}
} catch (error) {
console.log(error.message);
}
};
const getAccountComments = async () => {
try {
const result = await ProfileApis.getAccountComments({
account: userProfileInfo.id,
});
if (result) {
setAccountCommentList(result.data.datum);
}
} catch (error) {
console.log(error.message);
}
};
const registerCommentAccount = async () => {
try {
const result = await ProfileApis.registerCommentAccount({
node: userProfileInfo.id,
content: commentAccountText,
});
if (result) {
getAccountComments();
setCommentAccountText('');
}
} catch (error) {
console.log(error.message);
}
};
const registerCommentLike = async (id) => {
try {
const result = await ProfileApis.registerCommentLike({
node: id,
});
if (result.data.status) {
getAccountComments();
}
} catch (error) {
console.log("can't register comment like", error.message);
}
};
const followUser = async () => {
try {
const result = await ProfileApis.follow({
node: userProfileInfo.id,
});
if (result) {
console.log(result);
}
} catch (error) {
console.log(error.message);
}
};
const updateStepHandler = async (step) => {
let fetchedSteps = userProfileInfo.step;
try {
if (fetchedSteps) {
fetchedSteps.splice(fetchedSteps.indexOf(step), 1);
}
const result = await SettingsApis.updateAccountStep({
step: fetchedSteps,
});
if (result.data.status) {
fetchProfileInfo();
}
} catch (error) {
console.log("can't update account step", error.message);
}
};
useEffect(() => {
restoreToken();
}, []);
useEffect(() => {
fetchProfileInfo();
}, [user]);
useEffect(() => {
fetchPosts();
getAccountComments();
setUserCategoryType(userProfileInfo.category);
}, [userProfileInfo]);
return (
<AppScreen style={styles.container}>
<AppProfilePosts
{...{
refreshControl: (
<RefreshControl refreshing={refreshing} onRefresh={restoreToken} />
),
posts: userPosts,
navigation,
ListEmptyComponent: () => {
return (
<>
<AppPostUploaderBox {...{imagePickerHandler}} />
</>
);
},
ListHeader: () => {
return (
<>
<AppProfileTopNavHeader
{...{
navigation,
topHeaderNavigationHandler,
username: userProfileInfo.account,
userProfileInfo,
user,
}}
/>
<AppProfileHeader
{...{fetchedProfileData: userProfileInfo, navigation}}
/>
<AppProfileBio
{...{
fetchedProfileData: userProfileInfo,
updateStar,
navigation,
}}>
<AppProfileBioContent
{...{fetchedProfileData: userProfileInfo}}
/>
<AppBioCallToActions
{...{
userProfileInfo,
user,
followUser,
modalVisibilityHandler,
profileCommentVisibilityHandler,
}}
/>
</AppProfileBio>
{userCategoryType === 'personal' ? (
<AppProfileStepsSlider
{...{
avatarUri: userProfileInfo.avatar,
steps: userProfileInfo.step,
updateStepHandler,
fetchProfileInfo,
}}
/>
) : null}
</>
);
},
}}
/>
<ContactUserModal
style={[styles.wrapperStyle]}
{...{
modalVisibilityHandler,
isVisible: contactModalVisible,
}}>
<ScrollView>
<View style={styles.contentWrapper}>
<TouchableOpacity
style={styles.closeButtonContainer}
onPress={modalVisibilityHandler}>
<Feather name="x" style={styles.closeIcon} />
</TouchableOpacity>
<View style={styles.titleContainer}>
<AppText
style={{
fontFamily: Fonts.iransansMedium,
fontSize: 16,
marginRight: 10,
textAlign: 'right',
}}>
{contactUserInfo.firstname} {contactUserInfo.lastname}
</AppText>
<AppText style={{padding: 8}}>
{contactUserInfo.biography}
</AppText>
</View>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('mobile', text)
}
editable={editUserConnectionInputs}
value={contactUserInfo.mobile}
placeholder="شماره موبایل"
inputStyle={{
textAlign: 'left',
fontSize: 16,
top: 2,
color: '#838383',
}}
IconComponent={
<AppText
style={{
fontFamily: Fonts.iransans,
fontSize: 16,
color: '#838383',
}}>
+98
</AppText>
}
/>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('phone', text)
}
placeholder="تلفن ثابت"
value={contactUserInfo.phone}
editable={editUserConnectionInputs}
inputStyle={{
textAlign: 'left',
fontSize: 16,
top: 2,
color: '#838383',
paddingLeft: 20,
}}
/>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('webpage', text)
}
value={contactUserInfo.webpage}
editable={editUserConnectionInputs}
placeholder="وبسایت"
inputStyle={{
textAlign: 'left',
paddingLeft: 15,
fontSize: 16,
top: 2,
color: '#838383',
}}
/>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('province', text)
}
placeholder="استان"
value={contactUserInfo.province}
editable={editUserConnectionInputs}
inputStyle={{
fontSize: 14,
top: 2,
color: '#838383',
}}
/>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('city', text)
}
placeholder="شهر"
value={contactUserInfo.city}
editable={editUserConnectionInputs}
inputStyle={{
fontSize: 14,
top: 2,
color: '#838383',
}}
/>
<AppInputContainer
onChangeText={(text) =>
contactUserInfoTextChangeHandler('address', text)
}
value={contactUserInfo.address}
editable={editUserConnectionInputs}
placeholder="آدرس"
inputStyle={{
fontSize: 14,
top: 2,
color: '#838383',
}}
/>
{user.xaccount === userProfileInfo.id && (
<View style={styles.buttonContainer}>
{editUserConnectionInputs ? (
<AppButton
onPress={updateUserContactInfoHandler}
activeOpacity={0.7}
fontSize={16}
fontFamily={Fonts.iransansMedium}
textColor={Colors.primary_component_bg}
style={[styles.ctaButton, {backgroundColor: 'green'}]}>
ذخیره
</AppButton>
) : (
<AppButton
onPress={() =>
setEditUserConnectionInputs(!editUserConnectionInputs)
}
activeOpacity={0.7}
fontSize={16}
fontFamily={Fonts.iransansMedium}
textColor={Colors.primary_component_bg}
style={styles.ctaButton}>
ویرایش
</AppButton>
)}
</View>
)}
</View>
</ScrollView>
</ContactUserModal>
<Snackbar
duration={1500}
style={{
backgroundColor: 'green',
padding: 0,
}}
visible={snackbarVisible}
onDismiss={onDismissSnackBar}>
<View
style={{
height: 20,
width: ScreenSize.width - 50,
}}>
<Text style={{color: 'white'}}>اطلاعات با موفقیت به ثبت رسید</Text>
</View>
</Snackbar>
<ProfileCommentsListModal
{...{modalVisibilityHandler: profileCommentVisibilityHandler}}
isVisible={profileCommentsVisible}>
<KeyboardAvoidingView>
<View style={[styles.contentWrapperProfileComments]}>
<View style={{paddingBottom: 58}}>
<FlatList
ListEmptyComponent={<Text> nothing here </Text>}
data={accountCommentList}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => {
return (
<AppUserPostComment {...{item, registerCommentLike}} />
);
}}
/>
</View>
<AppCommentInput
{...{
registerCommentAccount,
commentAccountText,
setCommentAccountText,
}}
/>
</View>
</KeyboardAvoidingView>
</ProfileCommentsListModal>
</AppScreen>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
contentWrapper: {
height: ScreenSize.height,
width: '100%',
backgroundColor: 'white',
borderRadius: 10,
},
contentWrapperProfileComments: {
height: '100%',
width: '100%',
backgroundColor: 'white',
borderRadius: 10,
},
closeButtonContainer: {
height: 50,
width: '100%',
justifyContent: 'center',
},
closeIcon: {
fontSize: 30,
color: Colors.secondary_text,
marginLeft: 10,
},
titleContainer: {
padding: 5,
marginBottom: 20,
},
buttonContainer: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: '100%',
bottom: 20,
},
ctaButton: {
backgroundColor: Colors.primary_text,
width: '90%',
borderRadius: 4,
height: 45,
},
});

Answer 1

so can u add results from logcat? because self-closing apps because something wrong, like component cant rendering completely