Unable to Show unicorn.CustomKeyboard via Add Button

[ugoi]

Problem Description

I’m trying to swap out the keyboard when I press Add, but it’s not working—nothing happens.

Video

Screen.Recording.2025-04-27.at.23.23.28.mov

---

Code

import React, { useState, useRef } from "react";
import {
  TextInput,
  StyleSheet,
  // TouchableOpacity,
  SafeAreaView,
} from "react-native";

import {
  Constants,
  Assets,
  Colors,
  Spacings,
  Keyboard,
  View,
  Text,
  TextField,
  Button,
  Switch,
  TouchableOpacity,
} from "react-native-ui-lib";

const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
const KeyboardRegistry = Keyboard.KeyboardRegistry;
const KeyboardUtils = Keyboard.KeyboardUtils;

function CustomKeyboard() {
  return (
    <View flex bg-violet80 center>
      <Text h2>Custom Keyboard</Text>
    </View>
  );
}

// Register keyboard
KeyboardRegistry.registerKeyboard(
  "unicorn.CustomKeyboard",
  () => CustomKeyboard
);
export default function PlaygroundScreen3() {
  const [inputValue, setInputValue] = useState("");
  const inputRef = useRef(null);
  const [currentKeyboard, setCurrentKeyboard] = useState<string | undefined>(
    undefined
  );


  const renderContent = () => {
    return (
      <View style={styles.keyboardAccessory}>
        <View style={styles.switchContainer}>
          <Button
            style={styles.switchButtonLeft}
            onPress={() => {
              console.log("Type");
              setCurrentKeyboard(undefined);
            }}
          >
            <Text style={styles.typeButtonText}>Type</Text>
          </Button>
          <Button
            style={styles.switchButtonRight}
            onPress={() => {
              console.log("Add");
              KeyboardRegistry.requestShowKeyboard("unicorn.CustomKeyboard");
            }}
          >
            <Text style={styles.addButtonText}>Add</Text>
          </Button>
        </View>
        <Button
          style={styles.doneButton}
          onPress={() => KeyboardUtils.dismiss()}
        >
          <Text style={styles.doneButtonText}>Done</Text>
        </Button>
      </View>
    );
  };

  const onHeightChanged = (height) => {
    console.log("Keyboard accessory height changed:", height);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inner}>
        <Text style={styles.header}>Keyboard Accessory Example</Text>
        <TextInput
          ref={inputRef}
          placeholder="Type something..."
          style={styles.textInput}
          value={inputValue}
          onChangeText={setInputValue}
          placeholderTextColor="black"
        />

        <KeyboardAccessoryView
          renderContent={renderContent}
          kbInputRef={inputRef}
          kbComponent={currentKeyboard}
          onRequestShowKeyboard={(componentID) =>
            setCurrentKeyboard(componentID)
          }
          onHeightChanged={onHeightChanged}
          scrollBehavior={KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "flex-start",
  },
  header: {
    fontSize: 36,
    marginBottom: 24,
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  keyboardAccessory: {
    height: 60,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    backgroundColor: "#ffffff",
    borderTopWidth: 1,
    borderTopColor: "#e0e0e0",
  },
  switchContainer: {
    flexDirection: "row",
    width: "60%",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#e0e0e0",
    overflow: "hidden",
  },
  switchButtonLeft: {
    flex: 1,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    borderRadius: 0,
    borderRightWidth: 1,
    borderRightColor: "#e0e0e0",
  },
  switchButtonRight: {
    flex: 1,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
    borderRadius: 0,
  },
  typeButtonText: {
    fontWeight: "bold",
    fontSize: 18,
    color: "#000000",
  },
  addButtonText: {
    color: "#aaaaaa",
    fontSize: 18,
    fontWeight: "500",
  },
  doneButton: {
    width: "35%",
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff5a46",
    borderRadius: 30,
  },
  doneButtonText: {
    color: "white",
    fontSize: 18,
    fontWeight: "bold",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
  },
});

[ugoi]

Hello @nitzanyiz could you please help me with this issue?