Estoy desarrollando una aplicación de chat en la que tengo una ChatScreen , y supongamos que el usuario se desplaza hacia arriba a través del chat, ahora debería aparecer un botón scrollToBottom solo si el usuario no está en la parte inferior (al igual que las aplicaciones de chat populares), así que probé el siguiendo:

Primero traté de detectar cuándo el usuario se desplaza en un ScrollView , luego, usando onScroll prop nativeEvent , detecté si el usuario no está en la parte inferior, es decir, se desplazó hacia arriba. Luego, si es el caso, muestro el botón que debería aparecer en la esquina inferior derecha de la ChatScreen.

A continuación se muestra el código para mi enfoque. (¿Es posible devolver un componente View dentro de onScroll prop si se cumple la condición?)

 <ScrollView ref={scrollViewRef} onScroll={({nativeEvent}) => { const isCloseToBottom = nativeEvent.layoutMeasurement.height + nativeEvent.contentOffset.y > nativeEvent.contentSize.height - 30; if (!isCloseToBottom) { console.log('show scroll to bottom button') return ( <TouchableOpacity style={{position:'absolute', bottom:40, right:10, backgroundColor:'grey'}} onPress={() => scrollViewRef.current.scrollToEnd()}> <Icon ... /> </TouchableOpacity> ) } }} > ... </ScrollView>

Así que esto es lo que intenté, aunque cuando depuré usando console.log('show scroll to bottom button') como puede ver en el código, se activa, pero no puedo renderizar/ver el componente Button en la pantalla. (Intenté configurar opacity:1 & zIndex:1 en el accesorio de estilo de <TouchableOpacity /> pero aún no puedo ver).

¿Qué estoy haciendo mal? Cualquier solución a este problema sería muy apreciada.