I am having a hard time get the tests passed for my simple react-admin application which renders a header text on screen. Need HELP
Here is the component that renders text on screen
export const PostCreate = () => {
return (
<Create>
<SimpleForm>
<Typography
variant="h6"
sx={{
p: 2,
alignSelf: "center",
color: "rgb(77, 77, 77)",
fontFamily: "Poppins",
fontWeight: "600",
fontSize: "h5.fontSize",
}}
>
Create Post
</Typography>
</SimpleForm>
</Create>
);
};
Here is the test suite that checks if Create Post is rendered on screen
render(
<AdminContext>
<PostCreate {...defaultProps} />
</AdminContext>
);
expect(screen.getByText("Create Post")).toBeInTheDocument();
When I run yarn test test is failing with error Error: Uncaught [TypeError: Cannot read property 'toLowerCase' of undefined]
Please help to resolve this issue
Related
I install reanimated-bottom-sheet in my react native project but I faced with this error
TypeError: undefined is not an object (evaluating
'InnerNativeModule.installCoreFunctions') ERROR Invariant Violation:
Module AppRegistry is not a registered callable module (calling
runApplication). A frequent cause of the error is that t frequent
cause of the error is that the application entry file path is
incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
this is my code :
import BottomSheet from 'reanimated-bottom-sheet';
const renderContent = () => (
<View
style={{
backgroundColor: 'white',
padding: 16,
height: 450,
}}
>
<Text>Swipe down to close</Text>
</View>
);
const sheetRef = React.useRef(null);
return (
<SafeAreaView>
<View
style={{
flex: 1,
backgroundColor: 'papayawhip',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button
title="Open Bottom Sheet"
onPress={() => sheetRef.current.snapTo(1)}
/>
</View>
<BottomSheet
ref={sheetRef}
snapPoints={[450, 300, 0]}
borderRadius={10}
renderContent={renderContent}
/>
</SafeAreaView>
);
Please advise what I am doing wrong.
Thanks in advance
Current library that you have used will not work with latest react-native-reanimated version.
You have to use react-native-reanimated version 1.x with that.
Or you can use this updated library https://github.com/gorhom/react-native-bottom-sheet
const entryInput = forwardRef((props, ref) => {
return (
<View
style={{
fontFamily: "roboto-regular",
color: "rgba(255,0,0,0.6)",
fontSize: hp("1.5%")
}}>
<Text style={styles.text}>{props.show_err ? props.err : null}</Text>
<TextInput
ref={ref}
style={{
borderColor:
!props.err || props.err === "" || props.err === props.empty_err
? "gray"
: "rgba(255,0,0,0.6)",
backgroundColor: "rgba(213, 213, 213, 0.1)",
borderWidth: wp("0.3%"),
borderRadius: wp("1%"),
width: wp("85%"),
height: hp("5.2%"),
fontFamily: "roboto-regular",
fontSize: hp("2%"),
fontWeight: "normal"
}}
returnKeyType={props.last ? "done" : "next"}
blurOnSubmit={props.last ? true : false}
placeholderTextColor={"gray"}
paddingLeft={wp("2%")}
paddingRight={hp("2%")}
placeholder={props.placeholder}
onSubmitEditing={() => {
if (props.next_input) {
props.next_input.current.focus();
} else if (props.action) {
props.action();
}
}}
onChangeText={(text) => {
if (props.setText) props.setText(text);
if (props.validate) props.validate(text);
}}
/>
</View>
);});
New to react native... trying to create an input field for a password.
This custom component works great, but when I add the secureTextEntry={true} the font changes for no reason (it's not roboto-regular), it doesn't even change to the default font.
I noticed that when I remove the fontFamily key from the style object then save my code and the expo client reloads, then add fontFamily again and reload again the TextInput behaves as expected and the font is the one I set (roboto-regular), however the bug reappears when manually reloading the app.
The accepted answer will work on luck. The refs can be both defined or undefined when the component is being mounted.
Add the following to your component to properly solve the issue:
const _inputRef = useRef(null);
const setRef = useCallback((node) => {
if (_inputRef.current) {
// Make sure to cleanup any events/references added to the last instance
}
if (node) {
// Check if a node is actually passed. Otherwise node would be null.
// You can now do what you need to, setNativeProps, addEventListeners, measure, etc.
node.setNativeProps({
style: { fontFamily: "Quicksand-Medium" },
});
}
// Save a reference to the node
_inputRef.current = node;
}, []);
Make sure your TextInput has this ref assigned:
<TextInput ref={setRef} ... />
Adding the following to my custom component fixed the problem:
useEffect(() => {
if (ref) {
ref.current.setNativeProps({
style: { fontFamily: "roboto-regular" }
});
}
}, []);
I am creating a getstream feed app in react native, and have been trying to debug this error for the past couple hours but with no success. Other's have posted about it on stack overflow but not with using the <StreamApp></StreapApp> component from react-native-activity-feed.
Here is my code
import config from '../../config';
class Feed extends Component {
render(){
return(
<SafeAreaView
style={[{ flex: 1 }, { backgroundColor: '#FFFFFF' }]}
forceInset={{ top: 'always' }}
>
<StreamApp
apiKey={config.stream.app.key}
appId={config.stream.app.id}
token={this.state.token}>
<FlatFeed
feedGroup="timeline"
options={{
limit: 10,
}}
notify
navigation={this.props.navigation}
Activity={(props) => (
<TouchableOpacity
onPress={() => this._onPressActivity(props.activity)}
>
<Activity
{...props}
Footer={
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<LikeButton {...props} />
<ReactionIcon
icon={ReplyIcon}
labelSingle="comment"
labelPlural="comments"
counts={props.activity.reaction_counts}
kind="comment"
/>
</View>
}
/>
</TouchableOpacity>
)}
/>
</StreamApp>
</SafeAreaView>
);
}
}
I am importing the key and id from a config file located in my root directory. I have also tried storing the id and key in a .env file but both efforts result in the same error. The Token I am getting server-side, I don't include the code for retrieving it from AsyncStorage so I don't clutter the post.
Also, here is the exact error:
The problem is how you acquire the token. The error comes up if you store the token in the state, whereas if you import it from the same spot as you import the key and ID the app will load correctly.
I have the following section of code. When I put quotes (either single quotes around the integer values in the sections of code marked with Issue n my app crashes without any apparent error message. As soon as I navigate to that page I get a popup box that says: "Unfortunately ExampleApp has stopped." with an "OK" button.
Adding quotes to any of the four marked sections below causes the app to crash. However, if I add quotes around the flex integer, I get a proper error thrown and a red screen is displayed on my phone with the message: Invariant Violation: Invalid prop 'flex' of type 'string' supplied to 'StyleSheet container', expected 'number'.
render(){
const styles = StyleSheet.create({
container: {
flex: 0, //No Issue
padding: 8, //Issue 1
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#C1C1C1',
},
button: {
margin: 5 //Issue 2
}
});
return(
<View style={styles.container}>
<View>
<TouchableOpacity onPress={()=> this.goHome()} style={{marginRight: 20}}> //Issue 3
<Image source={require('../images/pic001.png')} style={{width: 30, height: 30}} /> //Issue 4
</TouchableOpacity>
</View>
<View style={styles.button}>
<Button title="Select" onPress={() => this.selectItem()} />
</View>
</View>
)
}
Is there a reason that quotes would cause my app to crash unexpectedly like this? Why do I get a proper error when the flex value is quoted, but do not get a proper error in any of the other situations.
If it helps, I am developing on Windows 10, connecting to my Android phone (with USB cable for the initial connection).
See also this page for a similar problem.
I am using react-router-navigation in my app. Let's say we have a login page where user have to enter his username and this username should appear in navbar as user is typing.
Given that routing is defined elsewhere from the actual component and component does not have callbacks to change route props: is it possible at all to achieve this? Perhaps some smart HOC? Ideas?
Hacks like passing the username all the way around with redux or similar are not the option. To be more specific I wish to be able to override any property specified in Card (right button, title, anything) from within component. Is it possible?
Please find sample code below,
Thanks
class Login extends Component {
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
}}>
<Text>
Username
</Text>
<TextInput style={{
height: 60,
width: 200,
}}
autoFocus
onChangeText={(value) => {console.log('NAME: ', value)}}/>
</View>
)
}
}
const App = () => (
<NativeRouter>
<Navigation>
<Card path="/"
title="Login"
exact
component={Login}
/>
</Navigation>
</NativeRouter>
)