TextInput event onContentSizeChange not firing - react-native

I am trying to make my TextInput grow in height when the entered text reaches the second line. However I don't receive an event when my text gets wrapped to the second line (without using a new line character). This results in partial hiding of the text within the input.
From the documentation I can not find any event which returns content size besides onContentSizeChange.
I am testing on an Android device.
I can not upgrade React-Native, I am stuck on 0.58.1
class SomeComponent extends React.component
{
...
handleContentSizeChange = (event) => {
console.log('Handling contentSizeChange');
}
render() {
return (
<TextInput ... multiline={true} onContentSizeChange={this.handleContentSizeChange}/>
)
}
}
React Native Environment Info:
System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU # 2.60GHz
Memory: 882.73 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.8.0 - ~/.nvm/versions/node/v11.8.0/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.5.0 - ~/.nvm/versions/node/v11.8.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 23, 26, 27, 28, 29
Build Tools: 27.0.0, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.0
System Images: android-22 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, chromeos-67 | Chrome OS 67
IDEs:
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.1 => 0.58.1
npmGlobalPackages:
react-native-cli: 2.0.1

You shouldn't need to use onContentSizeChange at all. The height should increase automatically as you type, provided you haven't fixed a height for the input or have limited it by fixed heights of the components around it.

Related

appState doesn't work on android (foreground, inactive, background)

How do I expect a user to close a react native (android platform) app. I'm already using appState but it doesn't work like on iOS. Is there any other way?
It works the exact same way for me in Android & iOS.
const app_state = useRef(AppState.currentState);
const [app_state_visible, set_app_state_visible] = useState(app_state.current);
const app_state_subscription = AppState.addEventListener("change", next_app_state => {
set_app_state_visible(next_app_state)
})
useEffect(() => {
console.log(app_state_visible)
}, [app_state_visible])
console.log outputs the exact same in the exact same circumstances
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
Android NDK: 22.1.7171670
react: 18.2.0 => 18.2.0
react-native: ^0.68.3 => 0.68.3```

Flutter Web - doesn't take a space bar key in TextFields

when I press the space bar, the space does not appear and by continuing to press it, a "." and it no longer allows me to edit the text.
I state that duranter the debug works correctly but using publishing the website does not work anymore.
i am using the command: flutter build web --web-renderer html --release for deploy webapp.
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.6 21G115 darwin-arm,
locale it-IT)
• Flutter version 3.0.5 at /Users/mauriziomancini/FlutterDev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f1875d570e (2 mesi fa), 2022-07-13 11:24:16 -0700
• Engine revision e85ea0e79c
• Dart version 2.17.6
• DevTools version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK
version 33.0.0-rc1)
• Android SDK at /Users/mauriziomancini/Library/Android/sdk
• Platform android-33, build-tools 33.0.0-rc1
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
[✓] VS Code (version 1.71.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.48.0
[✓] Connected device (3 available)
• iPhone 14 Pro Max (mobile) • 8D8DCB54-F212-4551-9CD4-B367955056BB • ios •
com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
here you will find an excerpt of the code
Scaffold(
appBar: AppBar(
backgroundColor: coloreApp,
title: Image.asset("lib/assets/titolo.png"),
actions: [
IconButton(
onPressed: () async {
await FirebaseAuth.instance.signOut();
setState(() {});
},
icon: const Icon(Icons.login_rounded),
),
],
),
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20),
child: SizedBox(
child: Image.asset("lib/assets/icona.png"),
height: 80,
),
),
Padding(
padding: const EdgeInsets.all(paddingNumber),
child: TextField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: inputDecoration("Email"),
),
),
Padding(
padding: const EdgeInsets.all(paddingNumber),
child: TextField(
controller: passwordController,
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: inputDecoration("Password"),
),
),
],
)),
);
you can find a non-working example on www.leonardowebapp.it
Since you can scroll using spacebar also, most probably when you hit space its getting captured by scroll. Check if configuring shortcuts in MaterialApp helps - -
#override
Widget build(BuildContext context) {
final shortcuts = Map.of(WidgetsApp.defaultShortcuts);
shortcuts[LogicalKeySet(LogicalKeyboardKey.space)] = ActivateIntent();
return MaterialApp(
shortcuts: kIsWeb? shortcuts : null,
scrollBehavior: MyCustomScrollBehavior(),
home: HomeScreen(),
);
}

Exception in native call from JS: Unexpected token '<'

Installing an existing React-native application is throwing error.
Logcat error:
E/unknown:ReactNative: Exception in native call from JS
com.facebook.react.devsupport.JSException: Unexpected token '<'
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
at java.lang.Thread.run(Thread.java:920)
Caused by: com.facebook.jni.CppException: Unexpected token '<'`
no stack
... 8 more
D/SoLoader: Loaded: libyoga.so
E/ReactNativeJNI: Attempting to call JS function on a bad application bundle: HMRClient.setup()
E/unknown:ReactNative: Exception in native call
java.lang.RuntimeException: Attempting to call JS function on a bad application bundle: HMRClient.setup()
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
at java.lang.Thread.run(Thread.java:920)
E/ReactNativeJNI: Attempting to call JS function on a bad application bundle: AppRegistry.runApplication()
E/unknown:ReactNative: Exception in native call
java.lang.RuntimeException: Attempting to call JS function on a bad application bundle: AppRegistry.runApplication()
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
at java.lang.Thread.run(Thread.java:920)
D/SoLoader: init exiting
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.4
CPU: (8) x64 Apple M1
Memory: 40.87 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.19.0 - /usr/local/bin/node
npm: 6.14.16 - /usr/local/bin/npm
Watchman: 2022.06.13.00 - /opt/homebrew/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
Android SDK:
API Levels: 29, 30, 31, 32
Build Tools: 29.0.2, 30.0.2, 30.0.3, 32.0.0, 32.1.0
System Images: android-30 | Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.1 => 0.61.1
Steps to reproduce
Create a React native app with version 0.61.1,
Install npm dependencies: npm i (tried npm i --legacy-peer-deps)
Run metro server: npx react-native start --reset-cache
Run android build: npx react-native run-android (I am using Android studio to run the app)
I have already been through following issue resolutions but nothing worked for me:
https://github.com/facebook/react-native/issues/21074
https://github.com/facebook/react-native/issues/32875
https://github.com/babel/babel/issues/14139
First clear your cache and node_module using the below command
cd android && ./gradlew cleanBuildCache && cd .. &&
watchman watch-del-all && rm -rf node_modules/ &&
rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf
$TMPDIR/metro-bundler-cache-* &&
yarn cache clean && yarn install &&
yarn start --reset-cache
After done this change you babel.config.js
module.exports = {
presets: [['module:metro-react-native-babel-preset', {
unstable_disableES6Transforms: true
}]],
};

React Native - Failed to parse declaration in styled-components

The same approach using stylesheet works normally
Environment
System:
OS: macOS 11.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU # 2.60GHz
Memory: 1.03 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.0/bin/yarn
npm: 6.14.4 - ~/Projects/design-system/typography/node_modules/.bin/npm
Watchman: 2021.09.13.00 - /usr/local/bin/watchman
npmPackages:
styled-components: 5.1.0 => 5.1.0
Reproduction
import React from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
const CustomText = styled.Text(({ theme }) => ({
fontFamily: 'Zapf Humanist 601',
}));
export default App = () => (
<View>
<CustomText>Your Text<CustomText>
</View>
);
Steps to reproduce
Copy ZapfHumanist601BT-Roman.ttf in your fonts folder (./src/assets/fonts)
Make a link font using npx react-native link
Apply a linked font in your text component
Expected Behavior
The font is expected to be applied in the style
Actual Behavior
Error: Failed to parse declaration "fontFamily: Zapf Humanist 601"
The font-weight property will not work fine in this situation.
You can put your fonts in src/assets/fonts directory:
src
|_ assets
|_ Montserrat-Bold.ttf
|_ Montserrat-Regular.ttf
// and so on for the rest of fonts file
And define the assets properties in the react-native.config.js file which is at the root of your project in this way:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
Now, you can use the fonts in the styles like this (without define the weight property):
title : {
fontFamily: Montserrat-Regular
}

React Native Expo app crashing on android apk file when ask location permission

I have problem with expo standalone app. the problem is with the ask permissions for locations. in the development mode, app asks for location permissions and works well. there is no bugs. after build the app using expo build:android, it creates a android standalone app. and after installing that APK and try to access the same page that asks for location permissions, the app is crashed and restarted.
Expo CLI 4.7.3 environment info:
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Users\ISLAMSOFT\AppData\Roaming\npm\yarn.CMD
npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 4.2.0.0 AI-202.7660.26.42.7486908
npmPackages:
expo: ~40.0.0 => 40.0.1
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
Expo Workflow: managed
in app.json I added this but not solve the problem
"android": {
"permissions":[
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION",
"CAMERA",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE"
]
},
I don't know how to test the apk file to check the error
Possible reason 1
I had same problem in my expo app few days earlier. There I needed AUDIO_RECORDING permission for my app. The app was fine in development but crashing on the production.
I have found the I missed the await keyword befor taking the permission in useEffect. Something like this:
useEffect(() => {
Permissions.askAsync(Permissions.AUDIO_RECORDING)
}, [])
Then I completely removed the above code. Then the permission was taken from an onPressIn event of a TouchableOpacity button. The code was something like this:
const startRecording = async () => {
const { status } = await Permissions.getAsync(Permissions.AUDIO_RECORDING);
if (status !== 'granted') return;
// Other codes...
}
You should double check how you took your permission.
Possible reason 2
Sometimes the expo app crashed because of wrong css value like this:
{flex: '1'}
Instead of
{flex: 1}
This kind of small mistakes crashed my apps many times. You should check all of your css property values.