I got an error No default value
Have used Bottom Sheet library and used it's components as shown below:
BottomSheetModalProvider
BottomSheet
BottomSheetTextInput
BottomSheetScrollView,
BottomSheetModal,
BottomSheetBackdrop,
BottomSheetDraggableView,
useBottomSheetDynamicSnapPoints
https://gorhom.github.io/react-native-bottom-sheet/usage
"react-native": "^0.67.4",
"#gorhom/bottom-sheet": "^4.4.2",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.3.0",
"react-native-safe-area-context": "^3.4.1",
"react-native-screens": "3.18.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-reanimated": "^2.9.1",
App.js
<SafeAreaProvider>
<GestureHandlerRootView style={{flex: 1}}>
<BottomSheetModalProvider>
<NavigationContainer ref={navigationRef}>
<MainNavigator />
</NavigationContainer>
{/* GLOBAL FLASH MESSAGE COMPONENT INSTANCE */}
<FlashMessage
position="top"
hideOnPress
hideStatusBar
autoHide
duration={3000}
/>
</BottomSheetModalProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
Related
I am using:
"expo": "~47.0.12",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"softwareKeyboardLayoutMode": "resize",
I have tried KeyboardAvoidingView and KeyboardAwareScrollView but it still not working.
<KeyboardAvoidingView enabled={true} behavior="padding" style={{ flex: 1 }} >
<View style={signupStyles.container} >
<SignUpheader />
<InputArea />
<PasswordInput />
<View/>
</KeyboardAvoidingView>
Before
After
I want it to be like this but without using "softwareKeyboardLayoutMode": "pan" as it creating problem in another screen
I developing my app with Expo and NativeBase.
Now this time, I would like you to help me with this weird Style problem.
Environment
"dependencies": {
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"babel-plugin-dotenv-import": "^2.2.0",
"expo": "~44.0.0",
"expo-location": "~14.0.1",
"expo-permissions": "~13.1.0",
"expo-status-bar": "~1.2.0",
"native-base": "^3.3.11",
"prettier": "^2.6.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-maps": "0.29.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0",
"tailwindcss": "^3.0.23"
},
Example
As I wrote above, Style dose not work stably for any reasons and it's the problem.
I will show you my example.
Expected Style
This picture is my expected view in this case.
What I want do is placing the white box that has texts and buttons inside on the center of the MapView.
Actual Style
This picture is the weird problem.
Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work.
The weird thing is that every time I reload the app without editing my code, Style's appearance sometimes changes. This is the meaning of "Style does not work stably".
NOTE: This picture looks different a bit from the above picture like the button color. Please don't care about details because this is just a developing view.
What I did for fixing the problem
Clear cache and reload the app
Stop using my custom theme
These does not fix the problem.
code
Here is my code.
WordBox is called by HomePresenter.
When onPress is emitted, WordBox shows.
I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled.
My explanation must be complex because I am not used to use English, but if it is alright with you, please tell me how to fix it.
Thank you.
export const WordBox = (isShow: boolean): JSX.Element | null => {
if (!isShow) {
return null
} else {
return (
<View width="full" height="full">
<Center width="full" height="full">
<Box
width={sizes.Box.width}
height={sizes.Box.height}
backgroundColor={colors.Base.White}
borderRadius="3xl"
shadow="7"
>
<Text mt="4" fontSize="3xl" fontWeight="bold" textAlign="center">
Set a new marker here?
</Text>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
Yes
</Button>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
No
</Button>
</Box>
</Center>
</View>
)
}
}
Additional Information(Without NativeBase code)
I styled my app again without NativeBase following great Abe's advise.
This issue still happens.
The minor appearance is different from above pictures a bit, but the view changes when reloading my app or rerunning it like these two pictures because Style doesn't work well.
Here is my code without using NativeBase but using tailwind-rn instead.
export const WordBox = (isShow: boolean): JSX.Element | null => {
const tailwind = useTailwind()
return (
<View style={tailwind('m-auto bg-white rounded-3xl h-1/6 w-10/12')}>
<Text style={tailwind('mt-2 text-2xl font-bold text-center')}>
Set a marker here?
</Text>
<View style={tailwind('mt-4 gap-x-2 flex-row justify-center')}>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>Yes</Text>
</Pressable>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>No</Text>
</Pressable>
</View>
</View>
)
}
Additional Information(Where WordBox is called)
WordBox is called inside MapView component which is wrapped by HomePresenter.
newmarker is called when I press on the screen, so new marker is not related to this problem, I think.
export const HomePresenter: FC<HomeProps> = ({
loading,
location,
newMarker,
showAddModal,
onPress,
}) => {
const tailwind = useTailwind()
return (
<View>
{loading ? (
<View style={tailwind('text-center justify-center')}>
<Text style={tailwind('font-bold text-2xl')}>Loading</Text>
</View>
) : (
<>
<MapView
key="mapview"
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={tailwind('h-full w-full')}
region={location}
onPress={(e: MapEvent) => {
onPress(e)
}}
>
{newMarker && newMarker}
<WordBox /> // WordBox is called HERE
</MapView>
</>
)}
</View>
)
// }
}
I resolved this problem thanks to #Abe.
The source of this issue is placing Modal inside MapView component.
I should've placed my modal underneath MapView. In fact, this is written in the react-native-maps Docs
I hope those who use react-native-maps do not make the same mistakes.
I am developing a project where I have a listiview and showing 150-200 customers. There is a feature where I need to drag and drop list item. Now I am trying to implement this with RecylerListView And React-Native-Reanimated-2, but facing some problems. Here is my main wrapper.
const gestureHandler = useAnimatedGestureHandler({
onStart(event) {
runOnJS(setMoving)(true);
},
onActive(event) {
top.value = event.absoluteY - 240;
console.log(listRef);
},
onFinish() {
runOnJS(setMoving)(false);
}
});
const renderCustomerList = (type, data) => {
return (
<Animated.View style={[styles.customerView]}>
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={{ width: wp("17%") }}>
<View style={styles.draggingHandler}>
<Text>{data.unique_number}</Text>
</View>
</Animated.View>
</PanGestureHandler>
<Customer key={data.borrower_id} details={data} navigation={props.navigation} />
</Animated.View>
);
}
const MainBody =() => {
const listRef = React.createRef();
.....................................
<SafeAreaView style={styles.wrapperView}>
<RecyclerListView
ref={listRef}
style={{ flex: 1 }}
onScroll={handleScroll}
onLayout={handleLayout}
rowRenderer={renderCustomerList}
dataProvider={dataProvider}
layoutProvider={layoutProvider}
renderAheadOffset={RENDER_AHEAD}
/>
{moving && (
<Animated.View style={reanimatedStyle}>
<View style={styles.customerView}>
<View style={[ styles.draggingHandler, {width: wp("17%") }]}>
<Text>{selectedCustomer.unique_number}</Text>
</View>
<Customer key={selectedCustomer.borrower_id} details={selectedCustomer} navigation={props.navigation} />
</View>
</Animated.View>
)}
</SafeAreaView>
............................................
}
In this list, while dragging an item and when it reaches the threshold/top, I am programmatically trying to scroll the listview. For that, I needed to get a reference to the RecyclerListView. But when I'm trying to use the listRef in onActive gesture event, the app crashed. When I open my logcat in android studio, it is giving me a bunch of errors. Among them TypeError: Cannot add new property '__reanimatedHostObjectRef'. What could be the reason? And what is your suggestion how should I implement this.
Here is a snack link:
https://snack.expo.dev/#rassemdev/customer-list
. If you remove comment on line no 46, it will give an error.
Here is my dependencies:
"dependencies": {
"#react-native-community/datetimepicker": "^3.5.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/netinfo": "^6.0.0",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"moment": "^2.29.1",
"native-base": "^3.2.1",
"react": "17.0.1",
"react-native": "0.64.2",
"react-native-app-auth": "^6.4.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "^2.2.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.4.0",
"react-native-sqlite-storage": "^5.0.0",
"react-native-svg": "^12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^8.1.0",
"recyclerlistview": "^3.0.5",
"styled-components": "^5.3.0",
"styled-system": "^5.1.5"
},
When building a custom Tab.Screen I've tried to pass a custom tabBarIcon. While the icon renders it will not navigate to the component TestScreen. In the docs for tabBarIcon my understanding the Tab.Screen should be written as:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableOpacity>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
}}
/>
When I omit the options:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
/>
the onClick renders the component when clicked. When I read the docs for Options for screens it mentions screenOptions should be passed on the Navigator or Group. I tried to see if I could find a similar Q&A:
React native react-navigation tabBarIcon does not display
Why Is My Component not Rendering Within my Tab.Screen?
but I was unable to see where my error is.
My current dependencies:
"dependencies": {
"#react-navigation/bottom-tabs": "^6.0.5",
"#react-navigation/native": "^6.0.2",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
How can I get my custom icon to render and navigate to the correct component?
Leaving this as an answer hoping it helps someone else down the road. After sleeping on this I examined my Tab.Screen again and I remembered for a TouchableOpacity to work it needed an onPress even though I was thinking the parent would take care of the navigation but this wasn't the case.
While this answer is somewhat accurate, with removing the TouchableOpacity, it would make the icon work, code:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
),
}}
/>
but it defeats the purpose of a custom button and the opacity change. After looking closer at options I wondered what if I passed down the navigation to onPress and used navigate?
Well it worked and I was left with:
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={({ navigation }) => ({
tabBarIcon: () => (
<TouchableOpacity onPress={() => navigation.navigate(routes.FOO)}>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
})}
/>
Your TouchableOpacity is overlap with react navigation internal press handler, just wrap your icon with View
If you want customize press behavior of tab icon pass the listener object to listener props https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen
version:
"dependencies": {
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.0.5",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
After using the latest version of react-navigation with redux, i get the message:
'Warning: isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.'
I didn't use isMounted in my code.
I don't know why this happen.
I haven't get this message before.
Need some help, please.
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import PropTypes from 'prop-types';
import {View, Text, Button} from 'react-native';
import {handleNav} from '../../actions/navAction';
import styles from '../styles/styles';
const Login = ({handleNav}) => (
<View style={styles.container}>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Button
title = {'Login Button'}
onPress = {handleNav.bind(null, 'MAIN')}
/>
<Button
title={'go to register page'}
onPress={handleNav.bind(null, 'REGISTER')}
/>
</View>
);
Login.propTypes = {
handleNav:PropTypes.func,
};
const mapDispatchToProps = dispatch => bindActionCreators({handleNav},dispatch);
export default connect(null, mapDispatchToProps)(Login);
Indeed, its react-navigation issue (https://github.com/react-navigation/react-navigation/issues/3956),
still the next release, you can solve the issue using below:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']);
Library that you use have this dependency.
try update deprecated packages :
npm outdated - (will show you all packages that can be updated)
if all packages updated : Wait for new version or go back to :
"react": "16.3.0-rc.0",
"react-native": "0.54.3",