I have an Alert to show the user the payment value, like this:
Alert.alert('Payment Value', 'The payment value is $' + paymentValue);
I've been searching but can't find a way to make the value text bold or increase the font size, is it possible to do that? Or I'll have to create a custom alert?
Looking at the docs, https://reactnative.dev/docs/alert#options-android, it doesn't seem like there is a way to customize the font size or style. You'll most likely have to create a custom component using a Modal. If you don't want to go that far, there is the option of changing an Alert's Type or Style.
Related
I'm given a custom designed number pad in a React Native app and I need to implement text input functionality, just like the OS number pad/keyboard. The text input is a regular React Native TextInput with showSoftInputOnFocus={false} to prevent the real OS keyboard from appearing.
How can I create a key press event that will be handled correctly with the currently focused text input field, without recreating whole text input/handling logic from scratch?
I'm looking for something like (made up code):
function pressEvent(){
Keyboard.dispatchPressEvent(1); //such a method does not exist, made it up to demonstrate my needs
}
<Pressable onPress={pressEvent}><Text> 1 </Text></Pressable>
The closest I've found was Keyboard.emit for which almost no documentation exists.
I've ended up creating a controlled component where I've manipulated the business logic on parent and passed it to the text field.
Because my needs were simple (numeric entry, no caret position. much like a calculator) I was able to pull it off.
1, I'm wondering why React native doesn't push an option that allow developers customize default font if it's a popular resonable need?
I've searched a number of posts and see some proposal solutions like: declares fontFamily every time we use Texts, declares common style and reuse, creates custom Text component to replace Text component from 'react-native', use theme provider and Text component from 'react-native-elements'... It says that a number of people needs this, but Text from 'react-native' hasn't supported this yet?
2, I search out a solution that overwrites render function of Text component (ex: https://github.com/Ajackster/react-native-global-props/blob/master/src/CustomFunctions/setCustomText.js) and consider where it's a good choice for this? is there any performance concern for it?
I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
I'm trying to create a TextInput component that is both editable and has clickable urls. According to the react native docs, the dataDetectorTypes prop is only supported when editable={false}.
Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}.
Has anyone found a way around this limitation? It seems like it should be possible. The behavior I want is...
Tapping on the url should open it in a browser
Tapping anywhere else should start editing at that position
It's ok if the link is no longer clickable when the TextInput currently has focus
The only thing I can think of to get around this is to store the editable value in state and then upon clicking some Edit button will change the state from editable to true.
onBlur would switch this state back to false
I haven't tried this before though so just a suggestion on attempting workarounds or finding some middle ground between the two.
My suggestion is to place the input field with the url centered inside a bigger div.
Make the input field not much bigger the text inside it and when you click it trigger some function that redirects to the page on your state.
And when you click on the outer div you trigger a function to focus on the input field and edit its value.
I have a text input component in React-native with which I am showing some text by default and user should not be able to edit it. He should keep continue to type in that. Like this: