After I read several answers, but I couldn't come up with a solution.
I need to touch on the icon to put the focus on the InputTextMask, but an error occurs:
refInput.current.focus is not a function
import React, {useRef} from 'react';
import {View} from 'react-native';
import {TextInputMask} from 'react-native-masked-text';
export default ({Icon, placeholder, value, onChangeText, mask}) => {
let refInput = useRef(null);
const getFocusInput = () => {
refInput.current.focus();
};
return (
<View>
<Icon width="32" height="32" fill="white" onPress={() => getFocusInput()} />
<TextInputMask
ref={refInput}
placeholder={placeholder}
value={value}
onChangeText={onChangeText}
type={mask}
/>
</View>
);
};
I'm using React Native 0.64 and React 17.
The thing is that react-native-masked-text ref return you a MaskedText class, not the TextInput itself, to get the TextInput you will need to use on method as they show in their documentation, just change:
refInput.current.focus();
to
refInput.current.getElement().focus()
hope it solves your problem.
Related
i am trying to learn react native but i faced with this error:
Element type is invalid: expected a string(for built-in components)or a class/function(for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in or you might hace mixed up default and named imports.
Check the render method of 'GoalInput'(I am sure i didn't made a typo first'l' and after that 'i' letter)
my App.js code:
import { useState } from "react";
import { StyleSheet, View, FlatList, Button } from "react-native";
import { StatusBar } from "expo-status-bar";
import GoalItem from "./components/GoalItem";
import GoalInput from "./components/GoalInput";
return (
<>
<StatusBar/>
<View>
<Button onPress={startAddGoalHandler}/>
<GoalInput
visible={modalIsVisible}
onAddGoal={addGoalHandler}
onCancel={endAddGoalHandler}
/>
</View>
</>
);
my GoalInput.js code:
import { useState } from "react";
import { StyleSheet,Button,TextInput,View,Model,Image} from "react-native";
const GoalInput = (props) => {
const [enteredGoalText, setEnteredGoalText] = useState("");
const goalInputHandler = (enteredText) => {
setEnteredGoalText(enteredText);
};
const addGoalHandler = () => {
props.onAddGoal(enteredGoalText);
setEnteredGoalText("");
};
return (
<Model visible={props.visible} animationType="slide">
<View>
<Image
source={require("../assets/Images/goal.png")}
/>
<TextInput
onChangeText={goalInputHandler}
value={enteredGoalText}
/>
<View>
<View>
<Button title="Add Goal" onPress={addGoalHandler} color="#b180f0" />
</View>
<View>
<Button title="Cancel" onPress={props.onCancel} color="#f31282" />
</View>
</View>
</View>
</Model>
);
};
export default GoalInput;
I have deleted the style parts for keep question simple and even i search a lot couldn't find the error source on my own thanks for all the attention.
by the way i am using 'expo'
There's no Model in react native , its Modal
SO chnage this first :
import { StyleSheet,Button,TextInput,View,Modal,Image} from "react-native";
And also where youve used in
return(
<Modal>
</Modal>
)
Hope it helps. feel free for doubts
I tried to find solution everywhere but still stuck on this issue.
I'm trying to implement <FAB /> from react-native-material but got this issue:
ISSUE
ps. I don't use react native expo
My code:
import React from "react";
import { Stack, FAB } from "#react-native-material/core";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
const MyFAB = () => (
<Stack fill center>
<FAB icon={props => <Icon name="star" {...props} />} color="primary" />
</Stack>
);
export default MyFAB;
The only other similar question I could find here involved redux which I'm not familiar with. I don't have a lot of code, I'd like a simple Filter to pop up with a list of stores represented by checkboxes. It seems to work when I console.log to see my object state, except that the checkboxes don't visibly show a change until I close and then reopen the modal. Perhaps I'm misunderstanding how modals or state works. Example: I check box 1 and console log shows the state changed but the box still looks unchecked. I close the modal and reopen, box 1 is now checked.
import React, { useState } from "react";
import {
Button,
FlatList,
Modal,
StyleSheet,
TouchableOpacity,
View,
} from "react-native";
import AppText from "./AppText";
import { MaterialCommunityIcons } from "#expo/vector-icons";
import colors from "../config/colors";
import { CheckBox } from 'react-native-elements';
function FilterPicker({
filterStores,
setFilterStores,
}) {
const [modalVisible, setModalVisible] = useState(false);
function onCheckChanged(id) {
const index = filterStores.findIndex(x => x.id === id);
filterStores[index].checked = !filterStores[index].checked;
setFilterStores(filterStores);
console.log(JSON.stringify(filterStores));
}
return (
<>
<TouchableOpacity onPress={() => setModalVisible(true)}>
<View style={styles.Filter}>
<MaterialCommunityIcons
name="tune"
color={colors.black}
size={30}
style={styles.Icon}
/>
</View>
</TouchableOpacity>
<Modal visible={modalVisible} onRequestClose={()=> setModalVisible(false)} animationType="slide">
<View>
{
filterStores.map((item,key) => <CheckBox title={item.key} key={key} checked={item.checked} onPress={()=>onCheckChanged(item.id)}/>)
}
</View>
</Modal>
</>
);
}
export default FilterPicker;
try after modifying your onCheckChanged function like following.
you are mutating filterStores
function onCheckChanged(id) {
const index = filterStores.findIndex(x => x.id === id);
const newFilterStores = [...filterStores];
newFilterStores[index] = {...newFilterStores[index],checked:!newFilterStores[index].checked};
setFilterStores(newFilterStores);
console.log(JSON.stringify(newFilterStores));
}
In my opinion, because the state doesn't change so it doesn't re-render
I have a bug that has been giving me a lot of headaches, I intend to put .svg images into my project and I have tried several ways although it always gives me an error... I am using the lib react-native-svg and I am doing it the following way:
Error: The above error occurred in the </static/media/igesticon.731bb908.svg> component:
in /static/media/igesticon.731bb908.svg
MedicationScreen
import React from 'react'
import { View, Text, FlatList, StyleSheet, Dimensions } from 'react-native'
import Logo from "../../assets/igesticon.svg";
const MedicationScreen = () => {
return(
<View>
<Logo width={120} height={40} />
</View>
)
}
You can embed SVG the following way:
const MedicationScreen = () => {
return(
<View>
<svg width={120} height={40} >
<image href="../../assets/igesticon.svg" />
</svg>
</View>
)
}
See how it works in the snippet below:
<svg width="64" height="64" viewBox="30 0 200 200">
<image href="https://upload.wikimedia.org/wikipedia/he/a/a7/React-icon.svg"/>
</svg>
Absolutely, you can't import svg like that.
You can use badass packages like SVGR.
This package will auto transforms your svg to react component.
And you can use like this
import Star from './star.svg'
const Example = () => (
<div>
<Star />
</div>
)
When I am trying to wrap redux form into the react-native elements it shows following error.
this is my code
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboardType,name}) => {
return(
<View style={{flexDirection:'row',height:50,alignItems:'center' }}>
<Text>
{label}
</Text>
<Input />
</View>
)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>
<Field label="Username" component={renderField} name="username" />
<Button title='SUBMIT' onPress={handleSubmit} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
When used FormInput in react-native elements it works then I am changed it into react-native elements 1.0.0beta4 and replace the formInput with Input component.
After that it shows above error.My debugger window also shows an error
debugger window
The error is due to your upgrade to react-native-elements beta which include breaking changes like the button component props :
The actual error is located in welcomePage.js file (as you can see in debugger), you need to change the object you pass to the button icon prop to a react component (see the button doc in the link above).