Please Help!!!
I Copy pasted code from https://www.npmjs.com/package/react-native-wheel-color-picker
In my App.js file but its not running
I installed on 3 library mentioned but it didn't work
Please help me to fix this code or I need a code of similar Colour wheel
(There is module Colour wheel similar to Colourpicker but it also didn't work for me)
import { Component } from 'react'
import { View, Text } from 'react-native'
import ColorPicker from 'react-native-wheel-color-picker'
class App extends Component {
render() {
return (
<View style={[]}>
<ColorPicker
ref={r => { this.picker = r }}
color={this.state.currentColor}
swatchesOnly={this.state.swatchesOnly}
onColorChange={this.onColorChange}
onColorChangeComplete={this.onColorChangeComplete}
thumbSize={40}
sliderSize={40}
noSnap={true}
row={false}
swatchesLast={this.state.swatchesLast}
swatches={this.state.swatchesEnabled}
discrete={this.state.disc}
/>
<SomeButton onPress={() => this.picker.revert()} />
</View>
)
}
}
export default App
Error I am getting
The error says null is not an object (evaluating 'this.state.currentColor')
The color prop on the ColorPicker component expects an object and is given null. This is because there is no state set. Using a class based component you can set the state in the constructor. This gets rid of the error. If you want you can define you "start" color in the state currentColor: "#cc7"
import { Component } from "react";
import { View } from "react-native";
import ColorPicker from "react-native-wheel-color-picker";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<View style={[]}>
<ColorPicker
ref={(r) => {
this.picker = r;
}}
color={this.state.currentColor}
swatchesOnly={this.state.swatchesOnly}
onColorChange={this.onColorChange}
onColorChangeComplete={this.onColorChangeComplete}
thumbSize={40}
sliderSize={40}
noSnap={true}
row={false}
swatchesLast={this.state.swatchesLast}
swatches={this.state.swatchesEnabled}
discrete={this.state.disc}
/>
// SomeButton
</View>
);
}
}
export default App;
PS: the SomeButton component will also throw an error since it is not defined.
Related
App.js:
import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import Epics from './screens/tmp';
import Pager from './screens/Pager';
const DrawerNavigator = createDrawerNavigator({
Home: {screen: Epics},
Page: {screen: Pager}
},{initialRouteName: 'Home'});
const Stack = createAppContainer(DrawerNavigator);
export default class App extends Component {
render() {
return <Stack />;
}
}
Trying to invoke fetch API everytime a user lands on screen using navigation addListner event
componentDidMount() {
this.loadFeed(); // fetch API
const { navigation } = this.props;
this.focus = navigation.addListener('willFocus', () => {
this.loadFeed(); // fetch API
});
}
React Navigation version from package.json:
"react-navigation": "^4.2.2"
"react-navigation-drawer": "^2.4.2"
Is there a better way to detect an active screen on app and invoke the fetch API? Or fix for the given error below?
Type Error: undefined is not an object (evaluating 'navigation.addListner'):
Error when the app launches
Update
I am trying to replicate following example in snack: https://snack.expo.io/HkrP8YPIf
What am I doing wrong? (I am new to React Native, please help me understand)
Try using the NavigationEvents component shipped with react-navigation 4.x. Just nest it anywhere inside your screen's render method.
Example:
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const MyScreen = () => (
<View>
<NavigationEvents
onWillFocus={() => console.log('Screen will be in focus')}
onDidFocus={() => console.log('Screen is in focus')}
onWillBlur={() => console.log('Screen will blur')}
onDidBlur={() => console.log('Screen blurred')}
/>
{/*
other code
*/}
</View>
);
export default MyScreen;
This just means that navigation doesn't exist. So it looks like the component is supposed to receive it via props and isn't. That's all I can tell from this code.
Check your props keys, agree with James. Have one suggestion here, since you're expecting a props, you should handle this common error whether key exist or not(if else)
I am rewriting a tutorial to TypeScript.
It should console.log after componentDidMount, but it doesn't. It doesn't show any error either.
What am I doing wrong?
Here's my code (minimized it for you):
import React from 'react';
import { View, Text, Animated, Keyboard } from 'react-native';
export class Logo extends React.PureComponent {
constructor(props) {
super(props);
}
componentDidMount() {
console.log(`Hey, I am mounted!`);
this.keyboardDidShowListener = Keyboard.addListener(
`Keyboard will show`,
this.keyboardWillShow
);
this.keyboardDidHideListener = Keyboard.addListener(
`Keyboard will hide`,
this.keyboardWillHide
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
keyboardWillShow = () => {
console.log(`Keyboard shows`);
};
keyboardWillHide = () => {
console.log(`Keyboard hides`);
};
render() {
return (
<View>
<Text>
Type the amount right here
</Text>
</View>
);
}
}
Please help.
Tutorial code here: https://github.com/HandlebarLabs/currency-converter-starter/blob/module-3-lesson-10-animation/app/components/Logo/Logo.js
You can import EmitterSubscription interface, which is the return type for Keyboard.addListener(...) from react-native.
Looks like this:
import { Keyboard, EmitterSubscription } from 'react-native';
And then you can add this to your code:
...
export class Logo extends React.PureComponent {
constructor(props) {
super(props);
}
keyboardDidShowListener!: EmitterSubscription;
keyboardDidHideListener!: EmitterSubscription;
...
Note that I added an ! after the property to tell TypeScript that I make sure it gets a value assigned, in this case, in the componentDidMount()
Hope this helps!
What is reactTag parameter in AccessibilityInfo.setAccessibilityFocus(reactTag) method? React native documentation don't provide any information about this parameter:
Set accessibility focus to a React component. On Android, this is equivalent
to UIManager.sendAccessibilityEvent(reactTag,
UIManager.AccessibilityEventTypes.typeViewFocused);.
I don't have any background of Objective-C and Java. A little example will be more appreciated. Thank !!!
reactTag is simply a number that is used by react to identify view objects in your application. It is the result of findNodeHandle function, which takes a view reference as parameter.
Here's a simple example on how you can use it:
import React, {Component} from 'react'
import {
...
findNodeHandle,
...
} from 'react-native';
class Sample extends React.Component {
constructor(props) {
super(props)
this.viewRef = null;
}
...
componentDidMount() {
if (this.viewRef) {
const reactTag = findNodeHandle(this.viewRef);
AccessibilityInfo.setAccessibilityFocus(reactTag);
}
}
render() {
return (
<View ref={el => { this.viewRef = el }}>
...
</View>
)
}
}
I am going through the react-native tutorials on lynda.com, "React-Native: Building Mobile Apps". The difference lies in the fact that I am using WebStorm to develop JavaScript based apps. I've created the files according to the tutorial:
appContainer.js:
import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";
export default class AppContainer extends Component {
constructor(props){
super(props);
this.state = {
store: {},
toggled: false,
theme: null
}
}
toggleDrawer(){
this.state.toggled ? this._drawer.close() : this._drawer.open();
}
openDrawer(){
this.setState({toggled: true});
}
closeDrawer(){
this.setState({toggled: false});
}
renderScene(route, navigator){
switch(route){
default: {
return null
}
}
}
configureScene(route, routeStack){
return Navigator.SceneConfigs.PushFromRight;
}
render(){
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="displace"
content={<View style={{backgroundColor: "#000", height: 1000}}
/>}
onClose={this.closeDrawer.bind(this)}
onOpen={this.openDrawer.bind(this)}
openDrawerOffset={0.2}
>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
/>
</Drawer>
);
}
}
index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import AppContainer from "./app/appContainer";
export default class dinder extends Component {
render() {
return (
<AppContainer/>
);
}
}
AppRegistry.registerComponent('dinder', () => dinder);
Run/Debug Configuration screen:
However, when I run the app by selecting run 'ios' from the run drop down windows, I am receiving the following error in the emulator window:
Can someone please explain how I can fix this issue within the confines of the code presented for the tutorial that I pasted?
In React-Nav 0.44.3 the Navigator has been deprecated: https://github.com/facebook/react-native/releases/tag/v0.44.3, so is not really a webstorm's configuration's issue.
To fix this, you can follow this Github issue, install the react-native-deprecated-custom-components package through npm or yarn.
And then in your appContainer.js, replace your
import { Navigator } from "react-native";
with
import NavigationExperimental from 'react-native-deprecated-custom-components';
And change all your Navigator call to NavigationExperimenal.Navigator
I am new to react native and having issues importing basic component into the index.android.js file. I could not find what was wrong and also couldn't find posts on this specific issue. Please help what is wrong.
Error says: Unexpected Token near CounterComponent.android.js line 7. Marked it with **.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return{
**<View>**
<Text>Counter component</Text>
</View>
};
}
}
Imported the file using command below in the index.android.js
import Counter from './app/components/CounterComponent'
Try replacing your { for ( after the return, something like this:
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return (
<View>
<Text>Counter component</Text>
</View>
);
}
}