Creating plugins for native applications - component code not updating?

Plugin builders
1

Hi forums,

Adding &mobile_plugins=true to the end of the plugin editor URL lets you create a mobile element. There’s a code block that allows you to return a React native component - great.

However, I’ve run into a problem and I’m not sure if it’s because I don’t have access proper access to the plugin alpha or perhaps this is just a bug. When updating the component code with some basic Hello World JSX:

function component(props) {
  return <Text>Hello!</Text>;
}

Nothing appears on the page. When inspecting the code in the debugger (I also tried adding a debugger breakpoint as well to test this):

function anonymous(React
) {
  return function component(props) {
    //# sourceURL=PLUGIN_1750677535432x6411154733379092 [ ... ]
  }
}

The component code is … empty :thinking:

Is anyone else seeing this?

Thank you for your time,

Jonah

3

image
image1011×359 17.3 KB

Hello, this is what I can see.

4

image
image1318×462 37.8 KB

5

I did the same, and I can see this while debugging it.

image
image1011×359 17.3 KB

6

Does this happen in your console and page when you do that?

image
image1920×1021 275 KB
(the whole preview breaks, and I get several errors)

7

Yes, it happens I think we should import Text element from react naitve

1 Like
8

function(props) {

const React = props.context.libraries['react'];
const {
    View,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
    Dimensions,
    Animated,
    Platform
} = props.context.libraries['react-native'];


return <Text>Hello </Text>

}

Please use this code.

9

I got it to work:

image
image1516×1822 80.7 KB

My error was that I was writing the function component (props) {} and not function (props) {}

Note: I find it concerning that if you write something that throws an error, the entire application refuses to load. If that’s the case, using third party libraries should be considered really dangerous to use

Thanks for your help @univgalaxy1112 :slight_smile:

10

Yea, and I think Text from react-native should be imported in your component.

How long have this featuer been live in bubble?

11

I’m not sure. Someone tipped me off that using &mobile_plugins=true activates the editor, that’s all I know.

12

I just saw this feature just after you posted it. btw, this is a great addition. good work bubble team.

This will attract a lot of react native developers, and we won’t need any 3rd party native app builders like BDK.

@jonah.deleseleuc are you building something? let’s build it together

1 Like
13

Sure! send me an email: jonah@floop.app

14

Sent you an email