I want to change the search icon in the searchbar of react-native-paper with the barcode-scan icon.
The native-paper uses react-native-vector-icons for icons and barcode-scan available in MaterialCommunityIcons
Here is the code that I tried which gives a blank instead of an icon
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
placeholder="Search"
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={firstQuery}
icon={<MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>
Is this the right way or am I missing something?
You have to use the callback to pass component in icon prop
icon={() => <MaterialCommunityIcons name="barcode-scan" size={30}/>}
Just adding '()=>' in icon wiil be suffice
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
placeholder="Search"
onChangeText={query => { this.setState({ firstQuery: query }); }}
value={firstQuery}
icon={()=><MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>
Related
I have a react native project (react native for macOS) I am using the input component but notice there is a blue outline. Not sure how to remove it. I am using Native base input component which I am told it's using the react native input component. How can I remove the ugly blue outline when focus. I am mainly trying to remove the one that is square
import React from 'react';
import {Icon, Input} from 'native-base';
import Ionicons from 'react-native-vector-icons/Ionicons';
const SearchBar = () => {
return (
<Input
variant="rounded"
size="xs"
// w={{
// base: '75%',
// md: '25%',
// }}
InputLeftElement={
<Icon
as={<Ionicons name="ios-search" />}
size={5}
ml="2"
color="muted.400"
/>
}
placeholder="Search"
/>
);
};
export default SearchBar;
When using a React native TextInput component the css styling outline: "none" can be used to remove the outline on focus. This can be done by passing it directly into the style prop.
<View style={styles.body}>
<TextInput
style={{ outline: "none" }}
placeholder="Text"
onChangeText={(newText) => setText(newText)}
value={text}
/>
</View>
);
}
However since you are using a custom component you will need to make sure that the styles are passed to the component.
For some reason there's no nativeBase api or documentation on this. I can not get a menu.item to respond to press/click no matter what I try.
Attempts
putting Text/Button elements from react-native into the menu. item
putting the menu in multiple different screens
creating a separate function instead of just arrow function
import React from "react"
import {
Menu,
HamburgerIcon,
Box,
Center,
NativeBaseProvider,
usePropsResolution,
Text,
Pressable
} from "native-base"
import {Alert, } from "react-native";
import { logout } from "../_redux/_actions/authentication.actions";
export const NavMenu = (props) => {
const menuItems = ['Profile','Sign Out'];
return (
<Box h="80%" w="95%" alignItems="flex-start">
<Menu w="150" top="-85" h="100%"
trigger={(triggerProps) => {
return (
<Pressable accessibilityLabel="More options menu" {...triggerProps}>
<HamburgerIcon color="black" />
</Pressable>
)
}}
>
**<Menu.Item onPress={()=>alert("Alert Title")}>**
Logout
</Menu.Item>
</Menu>
</Box>
)
}
export default () => {
return (
<NativeBaseProvider>
<Center flex={1} px="1">
<NavMenu />
</Center>
</NativeBaseProvider>
)
}
I found workaround around this problem. Would be interested in better solution, but this should work (it is also not very clean solution):
<Menu.Item onPress={()=>alert("Alert Title")}>
<Pressable onPress={()=>alert("Alert Title")}><Text>Logout</Text></Pressable>
</Menu.Item>
Basically what I am doing here is putting onPress to the Menu.Item and then same onPress to the child. You can use this approach for more complicated situations like adding button to the menu like this:
<Menu.Group title="Účet">
<Menu.Item onPress={() => console.log('log')}>
<Button colorScheme="red" onPress={() => console.log('log')} leftIcon={<Icon size="s" as={<MaterialIcons name='logout' />} />}>
Logout
</Button>
</Menu.Item>
</Menu.Group>
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.
I'm using react-native-paper and I want to get an Icon component but without any link with Button Component. I went through the doc and I didn't found an Icon Component. I want something similar than react-native-elements one
import { Icon } from 'react-native-elements'
<Icon
name='g-translate'
color='#00aced' />
So please help me to achieve this.
you can use "react-native-vector-icons" library because the icon in react-native-paper is from react-native-vector-icons.
here is code:
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;
You can use Avtar.Icon. By default, it has some margin around the icon. You can create your own component by modifying the Avtar.Icon. Here is an example:
const iconSize = 34
const customAvtardimension = 0.6 * iconSize
<Avatar.Icon
size={iconSize}
icon="bell-ring-outline"
color={Colors.redA700}
style={{
backgroundColor: Colors.transparent,
width: customAvtardimension,
height: customAvtardimension,
}}
/>
I add react-native-navigation-bar to my project. I want to display the left icon as a sidebar icon. I try this code but nothing is displayed :
<NavigationBar
title={'New Tech'}
height={80}
titleColor={'#fff'}
leftComponent={<Icon name="rocket"/> }
/>
ps: am installing react-native-vector-icons and import it by :
import Icon from 'react-native-vector-icons/FontAwesome';
Any help isappreciated.
It depends on your Navigation Version, but it is either called left or headerLeft (newer versions is the later):
static navigationOptions = ({ navigation }) => ({
title: `whatever`,
headerLeft: <Button title="" onPress={() => {/*do something*/}} />,
});