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;
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 am new to RN. WRiting my first app. I read the docs on passing functions but am unclear on how to solve my issue. I have built myself a custom button component.
import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { Theme } from '../Styles/Theme';
import { AntDesign } from '#expo/vector-icons'
export const CButton = ({text, icon = null, iconSide = null, onPress}) => {
return (
<TouchableOpacity onPress={onPress} >
<View style={Theme.primaryButton}>
{iconSide == "left" && icon &&
<AntDesign style={Theme.primaryButtonIcon} name={icon} size={24} color="white" />
}
<Text style={Theme.primaryButtonText}>{text}</Text>
{iconSide == "right" && icon &&
<AntDesign style={Theme.primaryButtonIcon} name={icon} size={24} color="white" />
}
</View>
</TouchableOpacity>
)
}
I think this is pretty basic stuff.
I am using the button as a login button in this case:
<CButton
text="Login"
icon="right"
iconSide="right"
onPress={login(email, password)}
/>
I am passing login(email, password) to the onPress prop and then using it in my custom component like:
<TouchableOpacity onPress={() => onPress} >
The issue is that as the way I am doing this is calling the function on load (I know thats a web term). Its not waiting until I press the button.
How do I make sure the onPress only happens when the button is pressed?
TIA
In your way, you are directly calling the login function when component is rendering.
You just need to modify your use of component like this
<CButton
text="Login"
icon="right"
iconSide="right"
onPress={()=> login(email, password)}
/>
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}/>}
/>